Question

我正在使用VueJS 2.x和Vueitfy。

场景：我有两个选择框，州和城市。根据状态，获取城市列表。例如：如果您选择Karanataka，则所有卡纳塔克邦城市都将显示在第二个选择框中。为简单起见，我们将其命名为stateSelect和citySelect。我在stateSelect上触发onChange事件，并调用获取城市功能。我使用计算属性与Vuex商店进行了两种绑定。

//store
export default new Vuex.Store({
   state: {
       mState: '',
       mCity: ''
   },
   mutations: {
        setState(state, mState){
            state.mState = mState;
        },
        setCity(state, mCity){
            state.mCity = mCity;
        },
   }
})

//component
computed: {
     state: {
         get(){
            return this.$store.state.mState;
         },
         set(val){
            this.$store.commit('saveState', val);
         }
     },
     city: {
         get(){
            return this.$store.state.mCity;
         },
         set(val){
            this.$store.commit('saveCity', val);
         }
     },
}

data(){
    return {
        states: [],
        cities: []
    }
}

methods: (
    getStates(), //fetches the list of states on mount
    getCities(stateId){
        //fetch cities based on selected state and convert it to a supported format
        this.cities = helpers.createSelectObj(response.data); //response is coming from an XHR request
    }
)

问题：由于我使用双向绑定，因此任何选择更改都会按预期更新Vuex。但是当Vuex已经有了数据时，例如，如果您离开组件并稍后返回，则状态字段将自动被选择，但城市无法被选择。而是Vuex中的mCity自动设置为null。

所需的输出：选择一个州后，必须获取城市（因为它已经发生了），但是当从组件导航并返回到该州时，州和城市都将自动被选中。

谢谢

使用动态vuetify v-select绑定预加载的vuex数据

0 个答案: