vue class绑定多值的问题。

Question

<li v-for="item in list" :class="isdata?'hasdata':'nodata'"></li>
//script
list:[{name:'l1',isdata:false},{name:'l2',isdata:false},{name:'l3',isdata:false}]

poi:{
   l1:["A","B"],
   l2:["C"],
   l3:["D","E","F"]
}

status:{
    A:false,
    B:true,
    C:true,
    D:false,
    F:true
}

现在我想判断当前item是否有数据，但是item[name="l1"]的isdata有数据与否是由status的A和B组成的,一个为true则为true，同理l2,l3

Answer 1

这不就是简单的业务堆叠吗

let d = {
  list: [{ name: 'l1' }, { name: 'l2' }, { name: 'l3' }],
  poi: {
    l1: ["A", "B"],
    l2: ["C"],
    l3: ["D", "E", "F"]
  },
  status: {
    A: false,
    B: true,
    C: true,
    D: false,
    F: true
  }
}

d.list.forEach(n => {
  // 取poi对应name里A,B...等值的数组，然后遍历替换为 status 对象对应的布尔值
  // 然后用ES5方法some，只要有一个为true，就返回true，最终返回一个布尔型的值
  n.isdata = d.poi[n.name].map(num => {
    return d.status[num]
  }).some(t => t)
})