Two way bindings with q-select



  • Hello I’m facing an issue trying to implement two way binding on a q-select component

    <q-field helper=“Height”>
    <q-select inverted-light color="lime"
    v-model=“height” :options=“heightOptions” />
    </q-field>

    computed: {
    height: {
    get() {
    return this.$store.state.auth.User.userStats.height;
    },
    set(value) {
    this.$store.commit(‘auth/SAVE_USER_PROP’, ‘height’, value);
    },
    },
    heightOptions() {
    const heightArray = [];
    for (let pas = 100; pas < 251; pas += 1) {
    heightArray.push({ value: pas, label: pas.toString() });
    }
    return heightArray;
    },
    },

    On page load q-select have the good value coming from the store (vuex) and when I change the value of q-select the store is correctly updated but the value of q-select stay the same.

    Do I need to do something to refresh the component ?

    Thanx all



  • I answer myself, I uses nested objects so reactivity observer are not created.
    Solution is to declare the full hierarchy of m nested object.