Implementing array.includes in a Vue.js project

Question

Implementing array.includes in a Vue.js project

I am currently working on a Vue app where I need to display or hide values based on selected options from a multiselect. So far, everything is functioning correctly with the select and the corresponding function it calls.

However, I encountered an issue when trying to use includes within my v-if statement in the HTML. It prompted an error saying it cannot read properties of undefined when trying to access includes.

I suspect there might be an issue with how I'm calling the includes method or the testArray variable here. Can anyone provide insight into this problem?

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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5a2c2f3f77372f362e33293f363f392e1a68746b746a">[email protected]</a>"></script>
<link rel="stylesheet" href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bbcdcede96d6ced7cfd2c8ded7ded8cffb89958a958b">[email protected]</a>/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>

javascript vue.js

Answer 1

Answer №1

As Chalie Schliesser mentioned in the discussion:

Add it as a data property (in data()) and append to it just like you are currently doing

When it comes to creating a unique array, there are several methods to achieve this:

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

You can then use the unique function to obtain a unique array.

You can create a function that accepts an array and a specific key of concern and iterate through them. Let's assume our array looks like this:

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

then we can implement something similar to 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;
};

Executing:

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

should generate the following result:

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

Answer 2

As Chalie Schliesser mentioned in the discussion:

Add it as a data property (in data()) and append to it just like you are currently doing

When it comes to creating a unique array, there are several methods to achieve this:

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

You can then use the unique function to obtain a unique array.

You can create a function that accepts an array and a specific key of concern and iterate through them. Let's assume our array looks like this:

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

then we can implement something similar to 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;
};

Executing:

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

should generate the following result:

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

Implementing array.includes in a Vue.js project

Answer №1

Similar questions

How can one leverage Node JS to effectively manage events?

Trigger a JQuery function to run upon the pressing of the Enter key within a textbox

Navigate to the appropriate Angular route using HTML5 mode in Rails

Combine various puppeteer-generated PDF buffers from different URLs into a consolidated PDF file and deliver it back to the user

Issue with a stationary directional light tracking the movement of a rotating object and/or changes in the camera perspective

Unicode Cookie Functionality in ExpressJS

Has the jQuery plugin object misplaced a variable?

Iterate over the object to verify if the field contains an empty array, then output null

Designing a navigational sidebar featuring clickable links to specific locations on Google Maps

The placement of term.js is always at the bottom of the body

Setting a scope variable in an isolate scope from a link function can be achieved by accessing the

GET method returns an empty array in the express node server

Is there a convenient method to combine arrays of objects in JavaScript using ellipses or an equivalent approach?

The filter plugin in Nuxt.js with Vue integration is malfunctioning

Tips and tricks for retaining the collapsed state upon reloading Bootstrap 5

Discovering the data-id value in an HTML element by clicking it with JavaScript and returning that value through a for loop

How can I effectively retrieve the JWT in a node environment?

Query the Firebase database in Angular2 to locate the latitude and longitude values that are nearest to the user's current coordinates

Efficiently transferring components of a JavaScript project between files

Issues with integrating chart.js in Laravel 7: Element #app not found?