Vue：为什么在商店中声明时计算属性需要 v-model 指令中的 .value 而不是在组件中声明时

Question

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).

Answer 1

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