主页 / 问题 / 886087
Accepted
Alex
Asked:2020-09-27 15:19:10 +0000 UTC2020-09-27 15:19:10 +0000 UTC

使用多输入时存储条目

  • 772

我无法弄清楚为什么 set 不适用于计算属性。单击时添加了一个输入，创建了一个对象数组。写入特定输入后，值会进入本地组件，但不会进入存储区。 

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

店铺

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

})

底线是你需要在填充时在另一个组件中显示值，并在添加新输入时动态执行。

javascript

1 个回答

  1. Best Answer

    如果您更改 elem 本身，将调用 set for elem ，例如：

    this.elem = 123

    此代码不会调用设置器：

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

    在此处阅读有关二传手的更多信息。

    您可以computed从代码中完全删除它并为 elem 添加一个监视。

    请注意，您的 elem 是一个对象数组，简单的 watch 在这里不起作用，您需要通过特殊的构造来监视这个数组：

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

相关问题