vue循环出来的数据，通过点击事件改变了数据，但是视图却没有更新

列表清单中，每一个列表的说明条件都只显示一条，点击实现折叠面板的效果，需求如下图：

给商品添加了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循环出来的数据，通过点击事件改变了数据，但是视图却没有更新的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。