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