使用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函數進行自動更新
加我微信我幫你解決吧
