列表清單中，每一個列表的說明條件都只顯示一條，點擊實現折疊面板的效果，需求如下圖：

給商品添加了text和flag，點擊展開文字，數據進行了更新，但是視圖沒有變化

<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}}臺，</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}}臺，</span>每臺直減{{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}}臺，</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}}臺，</span>每臺直減{{itemrule.amount}}元</p></div> </div> //拿到數據后進行處理
self.orderInfo.goods.forEach((item, index) => {item.rulename='展開';
　　　　item.ruleflag=true;
})

//點擊事件

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

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

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

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

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

//點擊事件

　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)
　　}
　},

?

轉載于:https://www.cnblogs.com/xiao-ling-zi/p/10950282.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。