Vuex dynamic checkboxes binding

后端 未结 1 430
傲寒
傲寒 2021-01-24 13:27

I have a problem with binding checkboxes using Vuex. On checkbox I use v-model with variable which has getter and setter to set or get value in store, the problem is that I get

相关标签:
1条回答
  • 2021-01-24 14:12

    Okay, assuming you want checked to contain ids of selected objects, I had to restructure your code significantly:

    const removeFromArray = (array, value) => {
    	const newArray = [...array];
      const index = newArray.indexOf(value);
      if (index > -1) {
        newArray.splice(index, 1);
        return newArray;
      }
      return array;
    }
    
    const store = new Vuex.Store({
      state: {
        checkboxes: {},
        checked: [],
      },
      mutations: {
      	addToChecked(state, id) {
        	state.checked.push(id);
        },
    		removeFromChecked(state, id) {
          const newArray = removeFromArray(state.checked, id);
          state.checked = newArray;
        },
        setCheckboxes(state, data) {
          state.checkboxes = data;
        },
      }
    });
    
    Vue.component('checkboxTree', {
      template: "#checkboxTree",
      computed: {
        checkboxes() {
        	return this.$store.state.checkboxes;
        },
      },
    });
    
    Vue.component('checkboxToggle', {
      template: "#checkboxToggle",
    	computed: {
        value:{
          get(){
            return this.$store.state.checked.indexOf(this.checkbox.id) > -1;
          },
          set(val){
            const mutation = val ? 'addToChecked' : 'removeFromChecked';
            this.$store.commit(mutation, this.checkbox.id);
          },
        },
      },
      props: ['checkbox'],
    });
    
    const app = new Vue({
      el: "#app",
      store,
      data: {
        checkboxData: {
          "5479": {
            "id": 5479,
            "title": "Место оказания услуг",
            "type": "checkbox",
            "dependencies": "",
            "description": "",
            "parent_id": 5478,
            "npas": ""
          },
          "5480": {
            "id": 5480,
            "title": "Способы оказания услуг",
            "type": "checkbox",
            "dependencies": "",
            "description": "",
            "parent_id": 5478,
            "npas": "50"
          },
          "5481": {
            "id": 5481,
            "title": "Объем и порядок содействия Заказчика в оказании услуг",
            "type": "checkbox",
            "dependencies": "",
            "description": "",
            "parent_id": 5478,
            "npas": "54"
          },
        }
      },
      computed: {
      	stateRaw() {
        	return JSON.stringify(this.$store.state, null, 2);
        },
      },
      mounted() {
        this.$store.commit('setCheckboxes', this.checkboxData);
        const firstElementKey = Object.keys(this.checkboxData)[0];
        const firstElement = this.checkboxData[firstElementKey];
        this.$store.commit('addToChecked', firstElement.id);
      }
    })
    <script src="https://unpkg.com/vue"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.0.1/vuex.js"></script>
    
    <div id="app">
      <checkbox-tree :checkboxData="checkboxData"></checkbox-tree>
      <pre v-text="stateRaw"></pre>
    </div>
    
    <template id="checkboxTree">
      <div>
        <p>checkbox tree</p>
        <form>
          <ul>
            <li v-for="checkbox in checkboxes">
              <checkbox-toggle :checkbox="checkbox"></checkbox-toggle>
            </li>
          </ul>
        </form>
      </div>
    </template>
    
    <template id="checkboxToggle">
      <div>
       <label>{{ checkbox.id }}</label>
       <input 
         type="checkbox" 
         :value="checkbox.id" 
         :id="'checkbox-' + checkbox.id" 
         :name="'checkbox-' + checkbox.id"
         v-model="value">
        {{value}}
      </div>
    </template>

    Using this code as an example, you can populate checked however you want to.

    Also, a jsfiddle link for you: https://jsfiddle.net/oniondomes/ckj7mgny/

    0 讨论(0)
提交回复
热议问题