溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
最近項目在使用vue，遇到幾次修改了對象的屬性后，頁面并不重新渲染，場景如下：
HTML頁面如下：
<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>
綁定的class是加一個紅色的邊框，如下：
.redBorder{
border:1px solid #f00;
}
在項目中點擊button后不出現紅色邊框和提示錯誤框，打開debugger查看，發現運行到了這里卻沒有執行，tableData中的值并沒有改變，這個方法在以前使用時會起作用，可能是這次的項目比較復雜引起的，具體原因不明。
后通過查找資料修改為使用$set來設定修改值，js如下：
this.$set(this.tableData[id],"red",true);
但是依然沒有起作用，打開debugger發現tableData的值修改成功，沒有渲染到頁面上，查找的資料也是比較凌亂，并不能解決問題，后請教大神，才知道是數據層次太多，沒有觸發render函數進行自動更新，需手動調用，調用方式如下:
this.$forceUpdate();
js完整代碼如下：
<script>
export default {
data() {
return {
tableData:[{id:0,name:"lili",red:false,tip:false}]
}
},
methods: {
clickBtn(id){
this.$forceUpdate();
this.$set(this.tableData[id],"red",true);
this.$set(this.tableData[id],"tip",true);
}}}
</script>
以上是我解決問題的全過程，有不對的地方請指教。
這篇vue修改對象的屬性值后頁面不重新渲染的實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
