Q Popup Edit - How to set computed vuex model @input?



  • I would like my q-popup-edit component to commit it’s v-model to my vuex store each time the user inputs (@input).

    Currently the value is not committed if the user click’s outside the popup or if the user navigates away from the router page destroying the popup.

    I could use the ‘buttons’ property and force the user to click ‘Set’ but I’d rather this behaviour.

    <q-popup-edit
        v-model="details">
    
            <q-input
            type="textarea"
            v-model="details"
            @keyup.enter.stop
            placeholder="Enter some details..."
            autogrow />
    
        </q-popup-edit>
    

    I’m sure I’ve done something similar before using :value and @input on a q-date field but I can’t figure it out this time.



  • I got it working. It was very easy in the end, I just switched ‘v-model’ for ‘value’ on the popup, but I don’t understand why either are necessary.

    My inputs already define the v-model so what are the reasons for v-model on the popup?? If you remove it you get an error.

    <q-popup-edit
        value="details">
    
            <q-input
            type="textarea"
            v-model="details"
            @keyup.enter.stop
            placeholder="Enter some details..."
            autogrow />
    
        </q-popup-edit>
    

Log in to reply