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循环出来的数据，通过点击事件改变了数据，但是视图却没有更新相关推荐

android vue.js点击反应慢,解决vue 界面在苹果手机上滑动点击事件等卡顿问题
用vue编写项目接近尾声,需要集成到移动端中,在webstorm上界面,运行效果都很完美,但是在苹果手机上各种问题都出现了,原生项目一向滑动流畅,事件响应迅速,可是苹果手机打开这个项目有两个问题, ( ...
vue移动端点击事件延迟_解决Vue 界面在苹果手机上滑动点击事件等卡顿问题_莺语_前端开发者...
用 (1).滑动页面卡顿, (2).点击事件响应缓慢,百度才发现在苹果手机上有300ms的延迟. 一.滑动页面卡顿 //页面布局页面内容在对应的组件的最外层div上加上这样的样式: .conten ...
在Vue组件中获取全局的点击事件
使用场景: 在Vue组件中点击某元素之外的地方移除该元素需求: 如上图所示,"用户列表"页面有三个Vue组件组成,分别是"菜单组件","导航组件&q ...
Vue 移动端项目百度地图点击事件无效、不触发解决方案
解决百度地图手机端点击事件不触发的一种方案版权声明:本文为博主原创文章,转载请标明原文出处. 问题背景我是半路接手的这个项目,该项目使用 Vue 开发的一款手机端的页面.到手里时,使用百 ...
vue 界面在苹果手机上滑动点击事件等卡顿解决方案
用vue编写项目接近尾声,需要集成到移动端中,在webstorm上界面,运行效果都很完美,但是在苹果手机上各种问题都出现了,原生项目一向滑动流畅,事件响应迅速,可是苹果手机打开这个项目有两个问题,(1 ...
给动态生成的id标签添加html,vue动态渲染svg、添加点击事件
欢迎关注[前端小讴的github],原创技术文章业务需求(vue项目中) 1.页面展示svg内容 2.监听svg内部的点击事件 3.动态改变svg内部元素的属性和值 html标签经多次实验,用em ...
修改百度地图点聚合点击事件获取markers数据
百度聚合点击事件(需要修改MarkerClusterer.js) this._clusterMarker.addEventListener('click', function (event) {tha ...
vue中设置子组件的点击事件不影响父组件的点击事件
" 大家好,我是雄雄,欢迎关注微信公众号:雄雄的小课堂. " 今天分享个技术块儿. 在做项目的过程中,遇到了个问题,简单的描述一下:有一个card卡片,上面绑定了个点击事件,点击c ...
cesium使用primitives加载模型数据，点击事件
//primitives加载原型模型 var billboards = viewer.scene.primitives.add(new Cesium.BillboardCollection()); f ...

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

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

最新文章

热门文章