[Vuejs]-Dynamic fields repeat the same data in text-field v-model

by

1👍

for test this sample here >>> Sample.
Is this what you looking for?
Paragraph is for default value you can delete it if not needed.
Entered.num is the important for push more input.

<template>
  <div class="hello">
    <div v-for="(x,index) in Paragraph" :key="x">
      <input
        placeholder="Type here"
        v-model="x.Text1"
        @keyup="GetText($event,index)"
      />
    </div>

    <input
      placeholder="Add Paragraph"
      v-model="Entered.num"
      @keyup="Get(Entered.num)"
    />
  </div>
</template>

data() {
    return {
      Entered: [{ num: 0 }],
      Paragraph: [
        {
          Text1: "Hello World1",
        },
        {
          Text1: "Hello World2",
        },
      ],
    };
  },
  methods: {
    Get(num) {
      while (num--) {
        this.Paragraph.push({ Text1: "" });
      }
    },
    GetText(event) {
       console.log(event.target.value , 'Index: ',index);
    },
  },
👤Meow

Leave a comment