Here is the data I am working with:
data() {
return {
currentStore: this.store,
brands: [],
}
},
Utilizing v-select component:
<v-select
v-model="currentStore.brands.data"
:options="allBrands"
:taggable="true"
:multiple="true"
/>
There is a watcher set up for an object resembling this (this.newVal):
brands:Object
data:Array[1]
0:Object
name:"3T"
data:Array[1]
0:Object
name:"abc"
The goal is to compare it with another object (this.allBrands)
allBrands:Array[254]
0:Object
name:"3T"
1:Object
name:"Achielle"
The objective is to remove any entries from the first object that are not present in the second, like removing "abc" and keeping only "3T".
Object.keys(newVal).forEach(function(key) {
console.log(Object.values(this.allBrands).includes(newVal[key].name));
});
watch: {
"store.brands.data": function (newVal, oldVal) {
console.log(this.allBrands);
console.log(newVal);
Object.keys(newVal).forEach(function(key) {
console.log(Object.values(this.allBrands).includes(newVal[key].name));
});
}
},
An error is encountered:
"TypeError: Cannot read property 'allBrands' of undefined"
The desired outcome for store.brands.data is:
brands:Object
data:Array[1]
0:Object
name:"3T"
since it matches one of the items in this.allBrands.
EDIT
Object.keys(newVal).forEach((key) => {
if (!Object.values(this.allBrands).includes(newVal[key].name)) {
newVal.pop();
}
});
This results in an error that needs further investigation:
Error in callback for watcher "store.brands.data": "TypeError: Cannot read property 'name' of undefined"