如果键具有特定元素，则不显示组件

Question

我有一个字典，其中包含键和与键关联的数据，如下所示。不要显示存在 Total 值的键的跨度。我的意思是，如果该值存在于与键关联的值中，则该组件应该隐藏，否则应该可见 这是在 vue 中，所以短跨度应该只显示 color，因为它没有 Total value，如数据所示。下面的代码是我到目前为止所尝试的 下面的数据是虚拟数据，应该是动态的，值和键会发生变化。

data:{
  name: ["0-10","10-20","100+","Total"],
  age: [ "70-80","80-90","90-100","Total"]
  color:["red","green"]
}

<span
          v-for="(elements, index) in Object.keys(data)"
          :key="index"
          >
          <span
            v-if="
              Object.values(data.elements).includes('Total')
            "
          ></span>
          <span
            v-else
            :title="elements"
          >
            {{ elements }}
          </span>

正在尝试如下所示的功能

preprocessing() {
      var keyss = Object.keys(this.data);
      for (var i of keyss) {
        console.log(i);
        if (this.data.i.filter((e) => e !== "Total")) {
          keyss.pop(i);
        }
      }
      return keyss;
    },

这是编辑后的版本，它适用于我的场景

data:{
  name: ["0-10","10-20","100+","Total"],
  age: [ "70-80","80-90","90-100","Total"]
  color:["red","green"]
}
<span
          v-for="(elements, index) in Object.keys(data)"
          :key="index"
          >
          <span
            v-if="
              !Object.values(data.elements).includes('Total')
            "
:title="elements"
          >{{ elements }}</span>
          </span>

Answer 1

由于elements 持有密钥，您必须使用[] 符号来读取动态属性

Object.values(data[elements]).includes('Total')

否则你可以像下面这样重写你的模板

<span v-for="(value, key) in data">
  <span v-if="value.includes('Total')" ></span>
  <span v-else :title="key">{{ key }}</span>
</span>