CODEWITHSUNDEEP
vue.jsvuejs2vue-componentvuetify.js
acrisvall
acrisvall

Reputation: 25

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

How could I improve this code, I'm creating dynamic fields that are created depending on the user input, but I have a problem when inserting the information in one field it replicates in the other fields, I want every new field fills independently and send that data to points.compartments_detail

I know the problem is in v-model="points.compartments_detail", because when I delete it lets me write every field independently.

points.compartments_detail is set as an empty array

 </v-row>
  <v-text-field
    v-model="points.number_compartments"
    label="COMPARTIMIENTOS"
    outlined
    :disabled="actionQuotation === 'VER'"
    type="number"
    @change="logSelect(), addCompartmentCapacity(points.number_compartments),deleteComparmentCapacity(points.number_compartments) "
    class="mx-3"
    dense
  />
</v-row>
<v-row v-for="(compartment, index) in comparment_capacity" :key="index" class="mx-0">
 <v-row v-if="points.number_compartments > 1">
  <v-text-field
    v-model="points.compartments_detail"
    label="ESPECIFICAR CAPACIDAD DE COMPARTIMIENTO" 
    outlined
    :disabled="actionQuotation === 'VER'"
     class="mx-3"
     dense
     hint="Ejemplo: 1000 galones / Click en boton agregar para añadir mas campos"
    />
   </v-row>
 </v-row>

This is my data :

comparment_capacity : [{comparment : ""}],

The functions to create and delete the fields

addCompartmentCapacity (item) {
  while(this.comparment_capacity.length < item){
      this.comparment_capacity.push({
        compartment : ""
    })
  }
},
deleteComparmentCapacity (item){
  while(this.comparment_capacity.length > item ) {
    if(this.comparment_capacity.length > 1){
      this.comparment_capacity.pop()
    }
  }
}

enter image description here

Any ideas will be of great help.

Upvotes: 0

Views: 447

Answers (1)

Meow
Meow

Reputation: 161

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

Upvotes: 1

Related Questions