Почему в action не передается второй параметр? Если убрать первый параметр, то id
передается и все работает. Как только ставлю два, то id
= undefined
.
С кнопками все понятно. Как быть с самим input
? Пример который я нашел в документации не работает когда в action передаётся ещё и id
. То есть, e.target.value
= undefined
. Без id
работает нормально.
Component
<div class="quantity">
<button @click="updateQuantity('increment', item.id)">+</button>
<input type="number" :value="item.quantity">
<button @click="updateQuantity('decrement', item.id)">-</button>
</div>
Action
updateQuantity: ({commit}, lalala, id) => {
commit(lalala, id);
}
В надежде на то, что не равнодушные люди сделаю полезные замечания и дадут правильные советы - выкладываю полный код корзины. Заранее огромное спасибо!
export default {
namespaced: true,
strict: true,
state: {
items: [
{
id: 0,
quantity: 1
},
{
id: 1,
quantity: 1
}
]
},
mutations: {
add: (state, id) => {
state.items.push(
{
id,
quantity: 1
}
);
},
remove: (state, id) => {
let index = state.items.findIndex(item => item.id === id);
state.items.splice(index, 1);
},
increment: (state, id) => {
let item = state.items.find(item => item.id === id);
item.quantity++;
},
decrement: (state, id) => {
let item = state.items.find(item => item.id === id);
item.quantity--;
},
},
actions: {
addOrRemove: ({state, commit}, id) => {
let item = state.items.find(item => item.id === id);
if (!item) {
commit('add', id);
} else {
commit('remove', id);
}
},
updateQuantity: ({commit}, lalala, id) => {
commit(lalala, id);
}
}
}
Component (Целиком)
<template>
<div class="mini-cart">
<div class="item" v-for="item in items" :key="item.id">
<div class="info">
<div class="name">Товар {{ item.id }}</div>
<div class="price">19.99 грн.</div>
</div>
<div class="quantity">
<button @click="updateQuantity('increment', item.id)">+</button>
<input type="number" :value="item.quantity">
<button @click="updateQuantity('decrement', item.id)">-</button>
</div>
</div>
</div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
export default {
name: 'MiniCart',
computed: {
...mapState({
items: state => state.cart.items
})
},
methods: {
...mapActions('cart', ['updateQuantity'])
}
}
</script>