I am facing a challenge in dynamically populating a dropdown list using Vuex and Vuetify for a search box. My issue lies in the fact that I am unable to access the $store within the method() function, only through computed() of course.
Below are my getters/state:
loadedTours:Array[9]
0:Object
1:Object
2:Object
3:Object
4:Object
5:Object
6:Object
7:Object
8:Object
9:Object
which can be fetched using v-for from the computed() function
tours () {
return this.$store.getters.loadedTours
},
Here is a method() implementation which operates successfully if the list is present in the data():
methods: {
querySelections (v) {
this.loading = true
setTimeout(() => {
this.items = this.tours.filter(e => {
return (e || '').toLowerCase().indexOf((v || '').toLowerCase()) > -1
})
this.loading = false
}, 500)
}
}
The expected outcome should display the tour titles listed in each object.
Current workaround:
added created():
created () {
this.loadedTours = this.$store.getters.loadedTours
},
modified method() as follows:
querySelections (v) {
let that = this;
setTimeout(() => {
that.items = that.loadedTours
}, 500)
}
Eliminated the arrow function at the data property.
Now aiming to retrieve the tourTitle, then apply input filtering.