In my Vue.js
component, I have v-select
element. When the user selects some value in that widget I call toDo
function which is defined in methods
block. As you can see in that function I want to know the value of the getter called filters
. Unfortunately, it returns me undefined
. At the same time in DevTools of Vue I notice that this getter has value. How in function correctly take the value of the getter?
QUESTION:
I use filters
in the template and they are displayed on the interface without any problem. But in toDo
function, the same filters
return undefined
result. I want to understand this strange behavior.
<div
v-for="filter in filters"
:key="filter.id">
<v-checkbox
v-for="(item, index) in filter.values"
:label="filter.description_values[index]"
:value="item"
:key="item"
v-model="filter.selected_values"
hide-details>
</v-checkbox>
<v-select
v-if="filter.widget==='single_dropdown'"
v-model="filter.selected_values"
:items="filter.filter_values"
label="Select ..."
dense
solo
@change="toDo">
</v-select>
</div>
***
computed: {
...mapGetters('store', [
'filters'
]),
},
methods: {
toDo: async (value) {
await console.log(this.filters) // result: undefined
}
}
***
Vuex Storage :
import { api } from '../../services/api'
export default {
namespaced: true,
state: {
filters: null
},
getters: {
filters: state => state.filters
},
mutations: {
setStateValue: (state, {key, value}) => {
state[key] = value
}
},
actions: {
getFilters: async (context) => {
await api.get('/api/filters').then((response) => {
context.commit('setStateValue', {
key: 'filters',
value: response.data
})
})
}
}
}
In your mapGetters computed, call all getters inside a one Array:
computed: {
...mapGetters(['store', 'filters']),
},
The filters
getter is at the root of your store; it's not inside a module. You can access it without namespacing:
computed: {
...mapGetters(['filters']),
},
At first - if Vuex code you provided is your main store (not a part of a module) you should remove namespaced: true,
- it is used solely for vuex modules.
and if Vuex code you provided is not part of a Vuex module you should simply map getters this way:
computed: {
...mapGetters(['filters']),
},
More info - https://vuex.vuejs.org/guide/modules.html#binding-helpers-with-namespace
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.