[Vuejs]-How to reference a store variable inside a value.sync statement in Vue.js

by

0👍

✅

Okay, Ricky was right, using a computed property with getter and setter worked perfectly and his link provided me with all the info I needed. In essence here’s what I now have:

<template lang="pug">
    .modal(v-if="popupShown", style="display:block", v-on:click="hideModalSafe")
        .modal-dialog.modal-lg(v-on:keydown.enter="syncSchedule()")
            .modal-content
                h3.modal-header {{moment(currentSchedule.start).format('YYYY-MM-DD')}}
                    button.close(type="button",v-on:click="popupShown=false") &times;
                .modal-body
                    .row
                        .col.form-group
                            label(for="schedule-start") {{__('Start')}}
                            k-input-time(:date.sync="currentSchedule.start")
                        .col.form-group
                            label(for="schedule-end") {{__('End')}}
                            k-input-time(:date.sync="currentSchedule.end")
                        .col.form-group
                            label(for="schedule-pause") {{__('Pause')}}
                            k-input-minutes(:minutes.sync="currentSchedule.pause")
                    .row
                        .col.form-group
                            label(for="schedule-site-id") {{__('Site')}}
                            k-combobox(model="modSites", context="selection", 
                            :value.sync="currentSiteMod")
                        .col.form-group
                            label(for="schedule-profile-id") {{__('Profile')}}
                            k-combobox(model="modProfiles", context="selection", 
                            :value.sync="currentProfileMod")
                        .col.form-group
                            label(for="schedule-employee-id") {{__('Employee')}}
                            k-combobox(model="modEmployees", context="selection", 
                            :value.sync="currentEmployeeMod")
                .modal-footer
                    .btn.btn-danger.mr-auto(v-on:click="deleteSchedule()")
                        k-icon(icon="delete")     
                        |  {{__('Remove')}}
                    .btn.btn-primary(v-on:click="syncSchedule()", tabindex="0") {{__('Save')}}
</template>


export default {
    ......
    computed:{
        currentSiteMod:{
            get(){
                return this.$store.state.manageSchedulesModale.currentSite;
            },
            set(value){
                this.$store.dispatch("manageSchedulesModale/updateCurrentSite", value);
            }
        },
        currentProfileMod:{
            get(){
                return this.$store.state.manageSchedulesModale.currentProfile;
            },
            set(value){
                this.$store.dispatch("manageSchedulesModale/updateCurrentProfile", value);
            }
        },
        currentEmployeeMod: {
            get(){
                return this.$store.state.manageSchedulesModale.currentEmployee;
            },
            set(value){
                this.$store.dispatch("manageSchedulesModale/updateCurrentEmployee", value);
            }
        }
    }
}

Once again, Vue.js actually impressed me with its magic. Before going with computed properties, I got tangled in a slew of ajax calls and promises that kept going back and forth, producing inconsistent results. Now, the store’s value gets updated perfectly and the lists react accordingly without me having to worry about an insane amount of parameters.

Anyway, there’s probably a few things I didn’t do right. I know I probably should have defined getters instead of accessing the property directly, but as it stands, it works and my client’s happy (and so am I).

Leave a comment