using array.includes in vue application

Question

I'm trying to get my vue app to work where it shows/hides values based on selected options (from a multiselect) and everything with the select and a function it's calling has been working.

However, when I try to use includes in my v-if on the html, it says it can't read properties of undefined, reading includes.

Am I calling the includes or the testArray incorrectly here?

 new Vue({ el: "#app", props: { }, components: {Multiselect: window.VueMultiselect.default}, data: { tiers:[ {name: "test tier"} ], selectedTier: [], values: [ {name: "adam", tier: "test tier"}, {name: "sam", tier:"none"} ] }, checkTier(){ console.log(this.selectedTier); let testArray = []; this.selectedTier.forEach(fields => { this.testArray.push(fields.name); }); console.log(this.testArray); }, })

 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-multiselect@2.1.0"></script> <link rel="stylesheet" href="https://unpkg.com/vue-multiselect@2.1.0/dist/vue-multiselect.min.css"> <div id="app"> <div class="uk-width-2-10" style="position:relative;"> <multiselect v-model="selectedTier" :options="tiers" :multiple="true" :close-on-select="true" placeholder="All Tiers" label="name" track-by="name" @input="checkTier" ></multiselect> </div> <div v-for="value in values"> <div v-if="testArray.includes(value.tier)"> <p>Working</p> </div> </div> </div>

Answer 1

As Chalie Schliesser said in the comments:

Create it as a data property (in data()) and push into it like you are now

With regards to a unique array there are a couple ways to do this:

1. const unique = (array) => [...new Set(array)];

You should then be able to call unique and have a unique array.

2. You could create a function that takes in an array and a key that you're concerned and loop through them. Lets say our array looked like this:

const array = [
  {title: 'Fancy pants'},
  {title: 'New fancy title'},
  {title: 'Fancy pants'}
]

then we could do something like this:

const removeDuplicates = (array, key) => {
  const check = {};
  const res = [];

  array.forEach(element => {
    if (!check[element[key]]) {
      check[element[key]] = true;
      const label = element.title;
      const value = element.title.toLowerCase();
      const search = element.title.toLowerCase();
      res.push({ label, value, search });
    }
  });
  return res;
};

Running:

console.log(removeDuplicates(array, 'title'))

should give us the following output:

const array = [
  {title: 'Fancy pants'},
  {title: 'New fancy title'}
]