问题描述
利用Vue做项目过程中，经常使用v-for渲染多个重复组件或dom元素，比如：传递json/字典，利用v-for遍历json中的key和value，并渲染到页面中，改变元素的顺序，如下所示：
<el-card class="content-card" v-for="(questionsData,i) in form.questionsData">//具体的业务......</el-card>
然而，v-for在设计过程中，无法实现对数据的双向绑定，也就是说，当json_data中的key或value改变时，默认data中的json_data属性值可以改变，但是页面内容还是之前组件第一次渲染出来的结果，无法实现实时刷新。
解决方案
Vue中，v-if是条件渲染，每次状态更新都会重新删除或者创建元素，因此利用v-if可以实现template中代码的局部刷新(先删除，再创建)，但v-if有较高的切换性能消耗。
Vue官方中不推荐v-for和v-if在同一标签中共同使用。因此，给上述示例代码外面加上一层div，file_is_show为true时创建，为false时销毁。如下所示：
<template v-if="file_is_show"><el-card class="content-card" v-for="(questionsData,i) in form.questionsData">//具体的业务......</el-card></template>
监听json_data数据改变，若json_data改变，元素先销毁，再创建，实现页面的局部刷新。
方法一
watch: {// 监听json数据变化，重新渲染文件夹内容json_data(newVal) {this.file_is_show = falseif (true) {this.$nextTick(()=>{// $nextTick 是在 DOM 更新循环结束之后执行延迟回调this.file_is_show = true})}}}
方法二
//下移 将当前数组index索引与后面一个元素互换位置，向数组后面移动一位zIndexDown(arr, row) {let index = arr.indexOf(row);if (index + 1 != arr.length) {this.swapArray(arr, index, index + 1);} else {this.$modal.msgWarning("已是最后，无法下移");}},//上移 将当前数组index索引与前面一个元素互换位置，向数组前面移动一位zIndexUp(arr, row) {let index = arr.indexOf(row);if (index != 0) {this.swapArray(arr, index, index - 1);} else {this.$modal.msgWarning("已是第一个，无法上移");}},/*** 数组元素交换位置* @param {array} arr 数组* @param {number} index1 添加项目的位置* @param {number} index2 删除项目的位置* index1和index2分别是两个数组的索引值，即是两个要交换元素位置的索引值，如1，5就是数组中下标为1和5的两个元素交换位置*/swapArray(arr, index1, index2) {arr[index1] = arr.splice(index2, 1, arr[index1])[0];this.file_is_show = falseif (true) {this.$nextTick(()=>{// $nextTick 是在 DOM 更新循环结束之后执行延迟回调this.file_is_show = true})}}
