javascript - 循环中的VueJS组件充当一个

UPDATE 能够使其正常工作，但遇到了最后一个问题。更新的代码在这里： VueJ不适用于首次点击或首次事件

-------------------------------------------------- ---------

我一直在尝试寻找一种使循环内的组件不起作用的方法。

我有一个循环（3格），在循环内，我有2个文本框。但是，每当我在其中任何一个中输入值时，该值就会填充到所有人。

谁能帮我分离这些组件？

我正在尝试使父div（第一循环）动态化。因此，子组件（第二个循环）应该与自己的祖父母组件（文本框）分开工作。

这是我的代码：

<div id="app">
    <div v-for="(ctr, c) in 3" :key="c">
      <button @click="input_add">1st</button>
      <div>
        <div v-for="(input, act) in inputs" :key="act.id">
          <input type="text" v-model="input.name"> 
          <input type="text" v-model="input.time">
          <button @click="input_remove(act)">Delete</button>
          <button @click="input_add">Add row</button>
        </div>
      </div>
      {{ inputs }}  
    </div>
  </div>

const app = new Vue({
    el: "#app",
    data: {
    inputs: [],
    counter: 0,
  },

  methods: {
    input_add() {
      this.inputs.push({
        id: this.counter + 1,
        day: null,
        name: null,
        time: null,
      })
      this.counter += 1
    },
    input_remove(index) {
      this.inputs.splice(index,1)
      this.counter -= 1
    }
  }
});

结果：