Vue循环input列表，且手动添加input后 v-model 的怪异现象求解

Question

methods 的 add 方法有两种写法，结果是 v-model 的表现结果第一种写法是正常的，第二种就不对，求解原因

第一种写法的效果图：

第二种写法的效果图：

<template>
  <div style="width:100%;overflow:hidden;">
    <ul class="list">
      <li v-for="(item, index) in arrs">
        <input
          type="number"
          v-model="item.customItem"
          @input="changeFunc(item, index)"
        />
      </li>
    </ul>
    <button @click="newadd">新增一项</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      arrs: [{
        'value': 1,
        'customItem': 1
      },{
        'value': 2,
        'customItem': 2
      }],
      na: {
        value: '',
        customItem: ''
      }
    }
  },
  methods: {
      newadd() {
      newadd() {
        // 这样写是正常的
        // this.arrs.push({
        //   value: '',
        //   customItem: ''
        // });
        // 这样写 v-model 就不对了
        this.arrs.push(this.na);
        console.log(this.na)        
      },
      changeFunc(item, index) {
        this.arrs[index].customItem = item.customItem;
        this.watchVal();
      },
      // 监听值的变化
      watchVal() {
        const arrs = this.arrs;
        if (arrs.length > 0) {
          for (let i = 0; i < arrs.length; i++) {
            let customItem = arrs[i].customItem;
            if (customItem * 1 < 0) {
              this.$set(this.arrs[i], 'customItem', 0);
            }
          }
        }
      }
  }
}
</script>

Answer 1

因为你添加的是同一个对象

Answer 2

因为对象对应的是索引，相当于不同的索引指向了统一个实际对象，所以就会出现同时改变的情况，而正确的结果是，不同的索引对应不同的对象

Answer 3

问题出在这里

你每次push进arrs数组中都是na这个对象，也就是说，你每次点击新增后arrs会长成这样

arrs = [
    // 这两项是你初始状态的
    {
        'value': 1,
        'customItem': 1
    },
    {
        'value': 2,
        'customItem': 2
    },
    // 下面是你push进去的
    na,
    na,
]

你每次push的都是na对象，所以导致下面的v-model都指向了na对象。

如果你在这里使用下面的代码就可以了：

this.arrs.push(JSON.parse(JSON.stringify(this.na)));

这只是一种解决方案，当然还有别的，我这是最笨的办法了，其他的要自己想办法啦