0

Не могу понять почему не работает 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
        }
    }

})

Суть в том что, нужно в другом компоненте при заполнение выводить значения, и делать это это динамически при добавление нового инпута.

1 ответ 1

1

set для elem вызовется если будете изменять сам elem, пример:

this.elem = 123

Такой код не вызовет сеттер:

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

Подробнее о сеттерах тут.

Вы можете убрать вообще computed из кода и добавить watch для elem.

Заметьте, что elem у Вас является массивом объектов, тут простой watch не сработает, нужно следить за этим массивом через специальную конструкцию:

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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.