Не могу понять почему не работает set в computed свойстве. Есть добавление инпута по клику, создавая массив объектов. После записи в конкретный input значение в локальный компонента попадают а в store нет.
<template>
<div>
<div class="deck__f">
<div class="i_wrap" v-for="(val, i) in elem" :data-item="i">
<input type="text" v-model="elem[i].title">
<input type="text" v-model="elem[i].style">
<input type="text" :value="i">
<button @click="elemDel(i)">del {{i}}</button>
</div>
<el-row>
<el-button type="danger" icon="el-icon-plus" @click="drawElRawAdd">Add More</el-button>
</el-row>
</div>
</div>
</template>
<script>
import _ from 'lodash';
export default {
data() {
return {
el:[]
}
},
methods: {
drawElRawAdd(){
this.el.splice(this.el.length, this.el.length+1, {});
this.$store.dispatch('drawElRawAdd', this.el);
},
elemDel(i){
this.el.splice(i, 1)
this.elemStore()
},
elemStore(){
this.$store.dispatch('drawElRawAdd', this.el);
},
},
computed:{
elem:{
get(){
return this.el
},
set(value){
this.el = value;
this.elemStore()
}
},
},
components:{
inputItem
},
}
</script>
Store
export default new Vuex.Store({
state:{
drawEl:[],
},
getters:{
},
actions:{
drawElRawAdd(context, data){
context.commit('drawElRawAdd', data)
},
drawElRawDel(context){
context.commit('decriment', data)
}
},
mutations:{
drawElRawAdd(state, payload){
state.drawEl = payload;
},
decriment(state, p){
state.drawEl = p
}
}
})
Суть в том что, нужно в другом компоненте при заполнение выводить значения, и делать это это динамически при добавление нового инпута.