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