列表清單中，每一個(gè)列表的說明條件都只顯示一條，點(diǎn)擊實(shí)現(xiàn)折疊面板的效果，需求如下圖：

給商品添加了text和flag，點(diǎn)擊展開文字，數(shù)據(jù)進(jìn)行了更新，但是視圖沒有變化

<div class="goodsConfirm van-hairline--bottom" v-for="(item,index) in orderInfo.goods" :key="index"><div class="goodsCon ">......</div><div v-if="item.showFall || item.showFixed" :class="[item.ruleflag?'rebateRule':'rebateRulehide']" ref="rebateRule" @click="toggleRule(item)"><p class="toggleRule">{{item.rulename}}</p><p v-if="itemrule.rebateType=='BASIC_POLICY' && item.showFall" v-for="(itemrule,i) in item.fallRebateRule" :key="itemrule.rebateUid">{{itemrule.rebateName}}：【{{itemrule.rebateTypeName}}】<span v-if="itemrule.quantity>0">最高{{itemrule.quantity}}臺(tái)，</span>直減{{itemrule.amount}}元</p><p v-if="itemrule.rebateType=='SPECIAL_POLICY'&& item.showFall" v-for="(itemrule,i) in item.fallRebateRule" :key="itemrule.rebateUid">{{itemrule.rebateName}}：【{{itemrule.rebateTypeName}}】<span v-if="itemrule.quantity>0">滿{{itemrule.quantity}}臺(tái)，</span>每臺(tái)直減{{itemrule.amount}}元</p><p v-if="itemrule.rebateType=='BASIC_POLICY' && item.showFixed" v-for="(itemrule,i) in item.fixedRebateRule" :key="itemrule.rebateUid">{{itemrule.rebateName}}：【{{itemrule.rebateTypeName}}】<span v-if="itemrule.quantity>0">最高{{itemrule.quantity}}臺(tái)，</span>直減{{itemrule.amount}}元</p><p v-if="itemrule.rebateType=='SPECIAL_POLICY'&& item.showFixed" v-for="(itemrule,i) in item.fixedRebateRule" :key="itemrule.rebateUid">{{itemrule.rebateName}}：【{{itemrule.rebateTypeName}}】<span v-if="itemrule.quantity>0">滿{{itemrule.quantity}}臺(tái)，</span>每臺(tái)直減{{itemrule.amount}}元</p></div> </div> //拿到數(shù)據(jù)后進(jìn)行處理
self.orderInfo.goods.forEach((item, index) => {item.rulename='展開';
　　　　item.ruleflag=true;
})

//點(diǎn)擊事件

　toggleRule(obj){
　　if(obj.ruleflag){
　　　　obj.rulename='收起'；
　　　　obj.ruleflag=false;? ?
　　}
　　else if(!obj.ruleflag){
　　　　obj.rulename='展開'；
　　　　obj.ruleflag=true;??
　　}
　},

對于已經(jīng)創(chuàng)建的實(shí)例，Vue 不能動(dòng)態(tài)添加根級(jí)別的響應(yīng)式屬性。但是，可以使用?Vue.set(object, key, value)方法向嵌套對象添加響應(yīng)式屬性。例如：

var vm = new Vue({data: {userProfile: {name: 'Anika'}} })

你可以添加一個(gè)新的 age 屬性到嵌套的 userProfile 對象；還可以使用 vm.$set 實(shí)例方法，它只是全局 Vue.set 的別名：

Vue.set(vm.userProfile, 'age', 27) vm.$set(vm.userProfile, 'age', 27) //拿到數(shù)據(jù)后進(jìn)行處理
self.orderInfo.goods.forEach((item, index) => {item.rulename='展開';
　　　　item.ruleflag=true;
})

//點(diǎn)擊事件

　toggleRule(obj){
　　if(obj.ruleflag){
　　　　this.$set(obj,'rulename','收起')
　　　　this.$set(obj,'ruleflag',false)
　　}
　　else if(!obj.ruleflag){
　　　　this.$set(obj,'rulename','展開')
　　　　this.$set(obj,'ruleflag',true)
　　}
　},

?

轉(zhuǎn)載于:https://www.cnblogs.com/xiao-ling-zi/p/10950282.html

總結(jié)

以上是生活随笔為你收集整理的vue循环出来的数据，通过点击事件改变了数据，但是视图却没有更新的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。