Estoy tratando de hacer que mi aplicación vue funcione donde muestra/oculta los valores en función de las opciones seleccionadas (de una selección múltiple) y todo con la selección y una función a la que llama ha estado funcionando.
Sin embargo, cuando trato de usar includes en mi v-if en el html, dice que no puede leer las propiedades de undefined, la lectura incluye.
¿Estoy llamando incorrectamente a include o testArray aquí?
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>Como dijo Chalie Schliesser en los comentarios:
Créelo como una propiedad de datos (en data()) y empújelo como lo está ahora
Con respecto a una matriz única, hay un par de formas de hacer esto:
const unique = (array) => [...new Set(array)]; Entonces debería poder llamar a unique y tener una matriz única.
const array = [ {title: 'Fancy pants'}, {title: 'New fancy title'}, {title: 'Fancy pants'} ]entonces podríamos hacer algo como esto:
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; };Correr:
console.log(removeDuplicates(array, 'title'))debe darnos la siguiente salida:
const array = [ {title: 'Fancy pants'}, {title: 'New fancy title'} ]