When I move a computed prop from my component to the store, I have to use .value in the v-model directive.
The two quasar select lists below are both working. They both display the state from the store, with the first one accessing the state from a computed property in the store and the second one accessing the state from a computed property in the component.
Both computed props are essentially the same implementation, why do I have to use .value in the first one's v-model directive?
<q-select
outlined
v-model="store.warehouse.currentDepotCode.value"
:options="store.warehouse.getDepotSelectList()"
emit-value
map-options
label="Select a Depot"
class="q-ma-md"
/>
<q-select
outlined
v-model="currentDepotCode"
:options="store.warehouse.getDepotSelectList()"
emit-value
map-options
label="Select a Depot"
class="q-ma-md"
/>
setup() {
const store = inject("store");
const currentDepotCode = computed({
get(){
return store.warehouse.state.currentDepot;
},
set(depotCode){
store.warehouse.setCurrentDepot(depotCode);
}
});
return {
store,
currentDepotCode,
};
store/index.js
const state = reactive({
depots,
currentDepot: 'VIC',
});
const currentDepotCode = computed({
get(){
return state.currentDepot;
},
set(depotCode){
state.currentDepot = depotCode;
}
});
export default {
state: readonly(state),
...methods,
...getters,
currentDepotCode,
};
(I am using a computed prop because the select component will appear on a number of pages so I want to use a setter function and I dont want to repeat the computed prop on every page, so its going in the store. Happy to have comments on this set up too).
i think because q-select
options is an array of objects, store.warehouse.getDepotSelectList()
the real value of each element
ex: [{ key: 1, value: 'first' }, { key: 2, value: 'second' }]
because in documentation it's using value directly https://quasar.dev/vue-components/select
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.