CODEWITHSUNDEEP
javascriptvue.jsoop
Sourabh Kulkarni
Sourabh Kulkarni

Reputation: 37

do not show the component if the key has certain element

i have a dictionary where it has keys and data associated with the key as shown below.Dont show the span for key in which Total value is present. i mean if the value is present in values associated to key the component should be hidden else should be visible this is in vue so inshort span should only display color as its not having Total value in it as shown in data. below code is what i have tried till now Below data is dummy data it should be dynamic, values and key will be changing.

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>

was trying with function as show below

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;
    },

this is the edited version and its work for my scenario

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>

Upvotes: 0

Views: 42

Answers (1)

Ravikumar
Ravikumar

Reputation: 2205

As elements is holding the key you have to use [] notation to read dynamic properties

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

Otherwise you can rewrite your template like below

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

Upvotes: 1

Related Questions