最近項目在使用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修改對象的屬性值后頁面不重新渲染的實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
