jeudi 15 février 2018

Vuex dynamic checkboxes binding

I have a problem with binding checkboxes using Vuex. On checkbox I use v-model with variable which has getter and setter and set or get value to store, the problem is that I get wrong data in store and I don't understand what cause the problem. Link to jsFiddle.

const store = new Vuex.Store({
state: {
checkboxes: {},
checked: {}
},
mutations: {
setCheckboxes(state, dataObj){
    console.log(dataObj);
    state.checkboxes = dataObj.data;
  let firstElem = dataObj.data[Object.keys(dataObj.data)[0]];
  state.checked[firstElem.parent_id] = [firstElem.id];
  console.log(state.checked);
},
setTreeState(state, dataObj){
    state.checked[dataObj.id] = dataObj.value;
  console.log(state.checked);
  }
 }
});


Vue.component('checkboxTree', {
  template: "#checkboxTree",
});

Vue.component('checkboxToggle', {
  template: "#checkboxToggle",
data(){
return {
    store
}
},
computed: {
value:{
    get(){ 
        return store.state.checked[this.checkbox.parent_id];
    },
    set(val){ 
        store.commit({
        type: 'setTreeState',
        id: this.checkbox.parent_id,
        value: val
      });
  }
}
},
props: ['checkbox']
});

const app = new Vue({
el: "#app",
store,
data: {
   checkboxData: {
    ...
}
}
},
mounted(){
  this.$store.commit({
    type: 'setCheckboxes',
    data: this.checkboxData
  });
 }
})




Aucun commentaire:

Enregistrer un commentaire