<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 = false
if (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 = false
if (true) {
this.$nextTick(()=>{ // $nextTick 是在 DOM 更新循環結束之後執行延遲回調
this.file_is_show = true
})
}
}
復制
註意
this.$nextTick是在DOM更新之後才會調用裏面的內容。
如果不加這句話，json_data 改變，file_is_show先false，然後馬上更新為true。而原本file_is_show就是true，所以DOM不會實現刷新。
nextTick的使用可以在dom銷毀之後再執行回調函數（創建功能），這樣才能達到銷毀->創建，達到局部更新的功能。
html5
vue.js
現在的人都在用這款折疊手機，妳還在等什麽？
精選推薦
廣告
vue中v-for綁定數組，當數組變化時頁面數據不更新（已解決）
1.5W閱讀·1評論·15點贊
2020年1月24日
vue中使用v-for渲染的列表當某項數據變動時視圖列表沒有更新問題解決
1638閱讀·2評論·1點贊
2021年2月9日
vue 修改v-for 循環內的item數據視圖不刷新
434閱讀·0評論·0點贊
2022年11月15日
Vue中的v-for指令不起效果的解決方法
0下載·0評論
2020年12月29日
Vue中v-for的屬性修改後不能及時的渲染數據
833閱讀·0評論·1點贊
2020年6月23日
Vue中v-for隱藏的坑 - 不能實時更新
3798閱讀·0評論·2點贊
2019年8月26日
超人氣解壓版《海島奇兵》！
精選推薦
廣告
v-for循環加載el-card並控制自動展開收起
1.3W閱讀·0評論·1點贊
2017年6月21日
js v-for 數據變動時沒有實時更新列表
359閱讀·0評論·0點贊
2022年7月12日
vue3中數據更新，視圖沒有更新解決方案
463閱讀·0評論·0點贊
2022年11月21日
Vue 列表渲染 v-for循環
811閱讀·0評論·1點贊
2019年5月27日
vue v-for循環修改屬性後頁面不重新渲染
1851閱讀·0評論·1點贊
2020年6月22日
解決vue this.$forceUpdate() 處理頁面刷新問題（v-for循環值刷新等）
2639閱讀·1評論·1點贊
2020年8月22日
Vue2.0 vue v-for循環，改變循環數據視圖不更新
1131閱讀·0評論·0點贊
2019年10月17日
VUE中v-for綁定數組，當數組變化時頁面頁面數據不更新問題
6790閱讀·0評論·4點贊
2020年9月8日
解決vue的數組渲染不更新的問題
1330閱讀·0評論·0點贊
2021年4月5日
vue v-for循環改變循環數據視圖不更新
1.0W閱讀·2評論·6點贊
2019年7月11日
vue使用vue時可以通過 this.$forceUpdate() 強制刷新頁面數據（用於v-for循環值刷新中）
1287閱讀·0評論·0點贊
2022年6月14日
v-for解決數據渲染刷新問題
1078閱讀·0評論·0點贊
2021年5月31日
去首頁
看看更多熱門內容
評論2
mR1300
贊
局部v-if加watch很管用，謝謝
2022.06.21
weixin_44474752
贊
感謝，幫我解決了讓我郁悶幾個小時的問題