I have a product checkbox selection and based on the selection it's showing/hiding the text fields.

The issue is: When you select the second item it duplicates the text field on the first item and so on.

Here's the Codepen

I'm using Vue 2 and an old version of Vuetify - 1.5

HTML side

<v-container grid-list-lg>
    <v-layout row wrap>
      <v-flex xs12>
        <div v-for="(item, index) of products" :key="index">
        <v-checkbox 
          hide-details
          v-model="selectedProducts"
          :label="item.name"
          :value="item.name"
          @change="showFields()"
        >
        </v-checkbox>
      </div>
      </v-flex>
    </v-layout>
    <v-layout row wrap v-for="(product, index) of selectedProducts" :key="index">
      <v-flex xs12>
        <h4>{{product}}</h4>
      </v-flex>
      <v-flex xs12 v-for="(item, index) of rowItems" :key="index">
        <v-text-field
          label="Price"
          v-model="item.price"
        ></v-text-field>
      </v-flex>
    </v-layout>
  </v-container>

JS side

new Vue({
  el: '#app',
  data() {
    return {
      products: [
        {
          name: 'Item A',
          id: 1,
          price: 10
        },
        {
          name: 'Item B',
          id: 2,
          price: 20
        },
        {
          name: 'Item C',
          id: 3,
          price: 30
        },
      ],
      rowItems: {},
      selectedProducts: []
    }
  },
    methods: {
    showFields(){
      for (let item of this.selectedProducts){
        this.rowItems[item] = [{
          price: ''
        }]
      }
    }
    }
})

CodePudding user response：

Solved.

I just had to pass the product inside the row Items

Updating this

<v-flex xs12 v-for="(item, index) of rowItems" :key="index">

To

<v-flex xs12 v-for="(item, index) of rowItems[product]" :key="index">