问题描述1:二维数组为接口请求数据,打印可以拿到数据,页面不显示,可能是异步请求导致,最后使用async、await
<ul class="actionList">
<li v-for="(item,index) in linkageRule" :key="index">
<div class="flex-between">
<span>{{item.deviceName}}</span>
<el-button type="text" @click="delDevice(index)">移除</el-button>
</div>
<el-checkbox-group v-model="item.action">
<el-checkbox-button v-for="(ss, index) in item.ruleActive" :label="ss.deviceAction" :key="index">{{ss.deviceActionStr}}</el-checkbox-button>
</el-checkbox-group>
</li>
</ul>
async submitDataScope() {
if(this.isMultiple){
this.linkageRule = await Promise.all(this.sortArr(this.$refs.chooseDevice.deviceList))
}else {
let temp = this.$refs.chooseDevice.singleDevice
this.deviceName = temp.deviceName
this.cameraForm.deviceId = temp.deviceId
this.$refs.deviceInfo.$emit('el.form.change')
this.cameraForm.alarmType = this.businessArr.find(i => i.deviceType === temp.deviceType).businessCode
this.getEvent(this.cameraForm.alarmType)
}
this.openDataScope = false
},
sortArr(arr){
let temp = arr.map(async item => {
// item.action = []
this.$set(item, 'action', [])
if(!item.ruleActive){
let res = await linkageRoleActive({deviceType:item.deviceType})
if(res.code === 200){
item.ruleActive = res.data
}else {
this.$message.error(res.msg)
}
}
return item
})
return temp
},
问题描述2:动态生成 el-checkbox 点击无法赋值问题
官方说法:Vue 不允许在已经创建的实例上动态添加新的根级响应式属性
可使用Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上
// item.action = [] 最先使用此方法数据无法绑定
this.$set(item, 'action', [])