lundi 21 septembre 2020

binding multiple checkboxes and updating the selected items array using vuex

In my application, There is an array of items. I am displaying those items along with checkboxes. Now, i want to bind those checkboxes state( check/uncheck) with vuex store to get selected items.

Vuex action code snippet:

const actions:Actions = {
    changeCheckProducts({ state, commit, dispatch}, payload) {
    const { value, data } = payload
    const index = state.products.findIndex(
      item => item.id === data.id
    )
    if (index === -1) {
      return
    }
    commit('CHANGE_CHECK_PRODUCTS_DETAILS', { index, value })
    dispatch('addSelectedItems', {data})
  },
 addSelectedItems({commit, state} ,payload) {
   // How will i do that ??
  state.newArray.push(payload.id)
 commit('ADD_SELECTED_ITEMS', payload)
 },
}

Store mutation code snippet:

const mutations: Mutations = {
    CHANGE_CHECK_PRODUCTS_DETAILS(state, payload) {
    const { index, value } = payload
    state.products[index].checked = value
  },
   ADD_SELECTED_ITEMS(state, payload) {
    // how to add selected items to a new array state
   },
}

component code snippet

<ul >
              <li aria-expanded="false"
                v-for="file in products"
                :key="file.id">
                <span>
                  <input type="checkbox"
                         :id="file.id"
                         :value="file.id"
                         v-model="checkedItems"
                         @change="onSelectedItems"/>
                  <span class="doc_input">
                    <i class="el-icon-document" aria-hidden="true"></i>
                  </span>
                  <span class="product__name">
                    
                  </span>
                </span>
              </li>
            </ul>

methods:

    onSelectedItems(data) {
    this.$store.dispatch('changeCheckProducts', data)
  }

I have tried many things to implement this means to store checked items and updating the array if unchecked some items and checked other items. I am new to vuex.Please help me on this.
 I know there is some problems in my store. Please suggest me on this



Aucun commentaire:

Enregistrer un commentaire