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>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:
const unique = (array) => [...new Set(array)];You should then be able to call unique and have a unique array.
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'}
]