vue修改對象的屬性值后頁面不重新渲染的實(shí)例
最近項(xiàng)目在使用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是加一個(gè)紅色的邊框，如下：
.redBorder{
border:1px solid #f00;
}
在項(xiàng)目中點(diǎn)擊button后不出現(xiàn)紅色邊框和提示錯(cuò)誤框，打開debugger查看，發(fā)現(xiàn)運(yùn)行到了這里卻沒有執(zhí)行，tableData中的值并沒有改變，這個(gè)方法在以前使用時(shí)會(huì)起作用，可能是這次的項(xiàng)目比較復(fù)雜引起的，具體原因不明。
后通過查找資料修改為使用$set來設(shè)定修改值，js如下：
this.$set(this.tableData[id],"red",true);
但是依然沒有起作用，打開debugger發(fā)現(xiàn)tableData的值修改成功，沒有渲染到頁面上，查找的資料也是比較凌亂，并不能解決問題，后請教大神，才知道是數(shù)據(jù)層次太多，沒有觸發(fā)render函數(shù)進(jìn)行自動(dòng)更新，需手動(dòng)調(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修改對象的屬性值后頁面不重新渲染的實(shí)例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
解決vue-seamless-scroll滾動(dòng)加點(diǎn)贊銜接處數(shù)據(jù)不同步問題
這篇文章主要介紹了解決vue-seamless-scroll滾動(dòng)加點(diǎn)贊銜接處數(shù)據(jù)不同步問題,初步判斷可能是因?yàn)橄路綉医觱ue-seamless-scroll是靜態(tài)的，沒同步DOM，本文給大家分享解決方法，感興趣的朋友一起看看吧2021-11-11
vue?使用el-table循環(huán)輪播數(shù)據(jù)列表的實(shí)現(xiàn)
這篇文章主要介紹了vue?使用el-table循環(huán)輪播數(shù)據(jù)列表的實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue實(shí)現(xiàn)Tab選項(xiàng)卡切換
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)Tab選項(xiàng)卡切換，點(diǎn)擊不同標(biāo)題顯示對應(yīng)圖片，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要為大家介紹了vue運(yùn)用之vuex持久化，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
這篇文章主要介紹了Vue中的事件綁定問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
這篇文章主要介紹了Vue 進(jìn)入/離開動(dòng)畫效果，代碼簡單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2017-12-12
options是new Vue的參數(shù),我們一般稱之為選項(xiàng)或者構(gòu)造選項(xiàng),下面這篇文章主要給大家介紹了關(guān)于Vue中options選項(xiàng)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03
vue 使用 sortable 實(shí)現(xiàn) el-table 拖拽排序功能
這篇文章主要介紹了vue 使用 sortable 實(shí)現(xiàn) el-table 拖拽排序功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-12-12
如何在Vue中實(shí)現(xiàn)登錄驗(yàn)證功能(代碼示例)
Vue是一種流行的JavaScript框架,可以幫助開發(fā)者建立高效的Web應(yīng)用程序,本文將為您介紹如何在Vue中實(shí)現(xiàn)登錄驗(yàn)證功能,并為您提供具體的代碼示例,感興趣的朋友一起看看吧2023-11-11
npm安裝vue@cli報(bào)錯(cuò)的簡單處理方式
最近工作中遇到了報(bào)錯(cuò),現(xiàn)在將解決的辦法分享給大家,下面這篇文章主要給大家介紹了關(guān)于npm安裝vue@cli報(bào)錯(cuò)的簡單處理方式,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12