vue修改資料頁面不重新渲染
阿新 • • 發佈:2018-11-08
使用vue,遇到幾次修改了物件的屬性後,頁面並不重新渲染,場景如下:
<template v-for="item in tableData"> <div :class="{'redBorder':item.red}"> <div>{{ item.name}}</div> <div> <el-button size="mini" @click="clickBtn(item.id)" type="info">編輯</el-button> <p class="el-icon-error" v-show="item.tip"></p> </div> </div> </template>
js部分如下:
<script> export default { data() { return { tableData:[{id:0,name:"lili",red:false,tip:false}] } }, methods: { clickBtn(id){ this.tableData[id].red=true; this.tableData[id].tip=true; } } } </script>
在專案中點選button後不出現紅色邊框和提示錯誤框,開啟debugger檢視,發現執行到了這裡卻沒有執行,tableData中的值並沒有改變,這個方法在以前使用時會起作用,可能是這次的專案比較複雜引起的,具體原因不明。
後通過查詢資料修改為使用$set來設定修改值,js如下:
this.$set(this.tableData[id],"red",true);
但是依然沒有起作用,開啟debugger發現tableData的值修改成功,沒有渲染到頁面上,查詢的資料也是比較凌亂,並不能解決問題,後請教大神,才知道是資料層次太多,沒有觸發render函式進行自動更新,需手動呼叫,呼叫方式如下:
this.$forceUpdate();
---------------------
此文為轉載文章,原地址為:
原文:https://blog.csdn.net/jerryyang_2017/article/details/82466957