javascript - 循环内的 VueJS 组件充当一个整体

Question

更新 能够使其工作，但遇到最后一个问题。更新的代码在这里: VueJs not working on first click or first event

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

我一直在试图找到一种方法，让循环内的组件不充当一个整体。

我有一个循环(3 个 div)，在循环内有 2 个文本框。但每当我在其中任何一个中输入值时，该值都会填充到每个人中。

谁能帮我分离这些组件？

我正在尝试使父 div(第一个循环)动态化。因此，子组件(第二个循环)应该与它们自己的祖 parent 组件(文本框)分开运行。

这是我的代码:

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

结果:

Answer 1

正如我在评论中提到的，您应该为迭代项创建一个组件。

父组件:

<div v-for="(item, index) in array" :key="index">        
    <child :item="item" />
</div>

现在您将item作为 Prop 发送了。让我们在 child 身上捕获它。

子组件:

<div>
    <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>
{{ inputs }}  

props: [item], // I am not sure you need it or not, BUT just showing how to do it.
data() {return { // your datas };},
methods: {
 // your methods...
},
//and else...

现在每个迭代项只能控制自身。我希望现在它有意义。

然后在子组件中构建按钮作为输入。之后，您可以将事件应用于刚刚单击的项目。