zoukankan      html  css  js  c++  java
  • 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)
      }
     },

    
    
  • 相关阅读:
    【CSS学习】--- 背景
    线程运行诊断
    Mysql变量、存储过程、函数、流程控制
    设计模式之外观模式(门面模式)
    Spring的JdbcTemplate使用教程
    @AspectJ注解的value属性
    自定义Yaml解析器替换Properties文件
    @Import导入自定义选择器
    Spring中Bean命名源码分析
    Java操作fastDFS
  • 原文地址:https://www.cnblogs.com/xiao-ling-zi/p/10950282.html
Copyright © 2011-2022 走看看