时间戳

首页 > 解决方案 > 如果键具有特定元素，则不显示组件

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

问题描述

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

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>

标签： javascriptvue.jsoop

解决方案

就像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>

推荐阅读