VueJS Компоненты внутри Al oop действуют как один

Question

ОБНОВЛЕНИЕ Был в состоянии заставить его работать, но получил одну последнюю проблему. Обновленный код здесь: VueJs не работает при первом щелчке или первом событии

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

Я пытался найти способ для компонентов внутри al oop не действовать как единое целое.

У меня есть al oop (3 деления), а внутри l oop у меня есть 2 текстовых поля. Но всякий раз, когда я вписываю значение в любое из них, оно заполняется для всех.

Может ли кто-нибудь помочь мне разделить эти компоненты?

Я пытаюсь создать родительский div (1st l oop) Dynami c. Поэтому дочерние компоненты (2nd l oop) должны действовать отдельно со своими собственными компонентами-прародителями (текстовое поле).

Вот мой код:

<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 в качестве реквизита. Давайте поймем это в дочерних элементах.

дочерние компоненты:

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

Теперь каждый повторяющийся элемент может управлять только собой. Я надеюсь, что это имеет смысл сейчас.

Затем создайте кнопки для входа в дочерний компонент. После этого вы можете применить события для только что нажатого элемента.

Answer 2

Вы должны использовать Array of Objects. Вот коды и коробка . Таким образом, каждый раз, когда вы добавляете новый объект в массив, создается новый индекс с новыми name и time, готовыми для заполнения.

<template>
  <div id="app">
    <img width="25%" src="./assets/logo.png">
    <div v-for="item in basic" :key="item.id">
      <button @click="addRow">Add row</button>
      <input type="text" v-model="item.name">
      <input type="text" v-model="item.time">
      {{ item.name }} - {{ item.time }}
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      id: 1,
      basic: [{ name: "", time: "" }]
    };
  },
  methods: {
    addRow() {
      console.log("added");
      this.id += 1;
      this.basic.push({
        name: "",
        time: ""
      });
    }
  }
};
</script>