vue遍历按钮添加事件

HTML

<el-col :span="8" v-for="(item,index) in channelControl.channel" :key="item.id">
                      <el-card class="box-card">
                        <p class="inline borderp10"><span  class="Sname">cron：</span>
                          
                          <span v-show="!item.flagblur">{{item.cron}}</span>
                          <el-input v-show="item.flagblur" v-model="item.cron"></el-input>
                          <p
                            :class="{'el-icon-edit': !item.flagblur, 'el-icon-check': item.flagblur}"
                            @click="savesync(item,index,cron)"
                          ></p>
                         点击事件
                        </p>      
                        <p class="borderp10"><span  class="Sname">id：</span><span>{{item.id}}</span></p>
                        <!-- <p class="borderp10"><span  class="Sname">timeRange：</span><span>{{item.timeRange}}</span></p> -->
                        <p class="inline borderp10"><span  class="Sname">timeRange：</span>
                          
                          <span v-show="!item.flagrange">{{item.timeRange}}</span>
                          <el-input v-show="item.flagrange" v-model="item.timeRange"></el-input>
                          <p
                            :class="{'el-icon-edit': !item.flagrange, 'el-icon-check': item.flagrange}"
                            @click="flagrangeclick(item,index,timeRange)"
                          ></p>
                        </p> 
                        
               
                      </el-card>
                    </el-col>

js

data{
cron:false,
          timeRange:false,
}

savesync(item,index){
          if(!item.flagblur){
            this.channelControl.channel[index]['flagblur'] = true
          }else{
            this.channelControl.channel[index]['flagblur'] = false
          }
          this.channelControl.channel[index] = item
        },
        flagrangeclick(item,index){
          if(!item.flagrange){
            this.channelControl.channel[index]['flagrange'] = true
          }else{
            this.channelControl.channel[index]['flagrange'] = false
          }
          this.channelControl.channel[index] = item
        }

遍历增加事件

<div class="fl" v-for="childitem in item.property" :key="childitem.id">
                            <p class="titlename">{{childitem.name}}：</p>
                            <span  v-show="!childitem.show">{{ childitem.value | capitalize}}</span>
                            <el-input v-show="childitem.show" v-model="childitem.value"></el-input>
                            <p
                              :class="{'el-icon-edit': !childitem.show, 'el-icon-check': childitem.show}"
                              @click="childitem.show = !childitem.show"
                            ></p>
                          </div>

js

let connectorArr=res.data.bridgeInfo.connectUpInfo.connector
                  let propertyArr=[]
                  for(var i=0;i<connectorArr.length;i++){//循环数组
                    propertyArr.push(connectorArr[i].property)
                  }
                  let newArr=[]
                  for(var i = 0; i < propertyArr.length;i++){
                      for(var j = 0; j < propertyArr[i].length;j++){
                          newArr.push(propertyArr[i][j])
                      }
                  }
                  // console.log("newArr",newArr)
                  for(var i=0;i<newArr.length;i++){//循环数组
                    // console.log("aaaaaa",newArr[i].encode)
                    if(newArr[i].encode==true){
                      newArr[i].value=base64.decode(newArr[i].value)
                    }
                  }
                  // console.log("newArr",newArr)
                  newArr.forEach(function(item){
                    _this.$set(item, 'show', false)
                  })

提交

 for (i = 0; i < saveArr.length; i++) { 
          delete  saveArr[i].show
        }