I can not understand why set does not work in the computed property. There is an addition of input by clicking, creating an array of objects. After writing to a specific input value in the local component fall and the store does not.

<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 } } })

The bottom line is that you need to display the values ​​in another component when filling in, and do it dynamically when adding a new input.

    1 answer 1

    set for elem will be called if you change the elem itself, example:

     this.elem = 123

    This code will not call the setter:

     v-model="elem[i].title"

    Learn more about setters here .

    You can remove the computed from the code and add a watch for the elem.

    Note that elem is an array of objects for you, a simple watch will not work here, you need to monitor this array through a special structure:

     watch: { elem: { // обработчик изменения handler (newVal, oldVal) { // сохраняете в store this.$store.dispatch('drawElRawAdd', this.el); }, deep: true // следить глубоко }