vue修改對象的屬性值后頁面不重新渲染的實例
更新時間：2018年08月09日 10:07:01 作者：lx_1024
今天小編就為大家分享一篇vue修改對象的屬性值后頁面不重新渲染的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
最近項目在使用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后不出現(xiàn)紅色邊框和提示錯誤框，打開debugger查看，發(fā)現(xiàn)運行到了這里卻沒有執(zhí)行，tableData中的值并沒有改變，這個方法在以前使用時會起作用，可能是這次的項目比較復(fù)雜引起的，具體原因不明。
后通過查找資料修改為使用$set來設(shè)定修改值，js如下：
this.$set(this.tableData[id],"red",true);
但是依然沒有起作用，打開debugger發(fā)現(xiàn)tableData的值修改成功，沒有渲染到頁面上，查找的資料也是比較凌亂，并不能解決問題，后請教大神，才知道是數(shù)據(jù)層次太多，沒有觸發(fā)render函數(shù)進(jìn)行自動更新，需手動調(diào)用，調(diào)用方式如下:
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修改對象的屬性值后頁面不重新渲染的實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)大轉(zhuǎn)盤抽獎功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了Vue中注冊全局組件的三種方式,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了vue中復(fù)用vuex.store對象的定義，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)簽到日歷效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
Vue數(shù)據(jù)更新但頁面沒有更新的多種情況問題及解決
這篇文章主要介紹了Vue數(shù)據(jù)更新但頁面沒有更新的多種情況問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要為大家介紹了Vue3啟用gzip壓縮時nginx配置gzip示例詳解詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
在 Vue 項目中引入自定義字體文件,可以通過多種方式實現(xiàn),這取決于你的項目結(jié)構(gòu)、構(gòu)建工具以及字體文件的來源,本文將詳細(xì)介紹如何通過不同方法引入本地字體文件以及從外部引入字體,需要的朋友可以參考下2024-10-10
vue 實現(xiàn)復(fù)制內(nèi)容到粘貼板clipboard的方法
下面小編就為大家分享一篇vue 實現(xiàn)復(fù)制內(nèi)容到粘貼板clipboard的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了Vue2的diff算法的相關(guān)資料，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-01-01
今天小編就為大家分享一篇vue 實現(xiàn)特定條件下綁定事件，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11