使用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