Vue.js 在Vue JS中添加CSS类，该类基于v-for后跟v-if

Vue JS：

index.html：

new Vue({
el: '#app',
data: {
results: {
  device: [{
    deviceName: "",
    info: [{value: ""}]
  }]
} 

{{device.deviceName}
{{info.value}}

这里有两个td

对于第一个td，将显示所需的值，但我希望根据info.value返回的值突出显示设备

在您认为td单元不应突出显示的任何地方。但即使一行中的1列值为false，也应突出显示该值以及设备名称

我试图用注释的代码实现它，在第一个td上绑定该类

然而，这种语法似乎是错误的

我想要的是根据info.value中的值突出显示整个tr

第二个td按预期工作

所以，我需要第一个td或包装tr的帮助

在您认为td单元不应突出显示的任何地方。但即使一行中的1列值为false，也应突出显示该值以及设备名称

代码笔：

添加一个方法来检查所有值是否为false

<tr v-for="device in results.device" >

    <td>{{device.deviceName}}</a></td>

    <!--:class="{ false: v-for='info in device.info' !info.value }"-->

    <td v-for="info in device.info" :class="{ false: !info.value }">{{info.value}}
    </td>

</tr>

和html格式

methods:{
  flasecond(index){
    let res = false
     this.results.device[index].info.forEach(info=> {
        if(!info.value) res = true
    })
      return res
  }
}

{{device.deviceName}
{{info.value}}

为什么

信息：[{value:：}]

在数组中？有多重值吗？如果该单个值使用

info:{value:：}

Yes，则它确实有多个值，您可以给出

设备

数组的样本数据。然后我可以给你一个解决方案。device:[{“deviceName”：“devicename1”，“info”：[{“value”：false}，{“value”：“'}]}另外，具有真值的td不应该是高亮显示的。我正试图通过单击当前引用链接的任何列的表头来对列数据进行排序，但是这会“TypeError:this.results.sort不是一个函数”使用codepen或JSFIDLE发布一个新问题，这些问题会重现错误。我将尝试修复

 <tr v-for="(device, index) in results.device"  >
  <td :class="{'falseclass' : flasecond(index)}">{{ device.deviceName }}</td>
  <td v-for="info in device.info" :class="{'falseclass' : !info.value}">{{info.value}}</td>
</tr>