Vue/Vuetiy 1.5 - Adding and removing rows + show and hide fields based on selected items issue

Question

I have a form with some show and hide functions based on the selection you do on the first radio buttons. The second part shows 2 inputs and one select. Based on what you chose on the select the inputs will show and hide. It works fine with one row but when I add 2 or more rows the select change (show/hide) all inputs on all rows instead of the selected one only.

Here's the piece of code (CodePen available here - https://codepen.io/fabiozanchi/pen/NWpgxVY?editors=1011)

Template

    <v-layout row wrap>
        <v-flex xs12>
            <v-btn flat icon color="primary">
                <v-icon size="32px" @click="addNumberRow()">add_circle</v-icon>
            </v-btn> Add new line for numbers and text
        </v-flex>
    </v-layout>
    <v-layout row wrap align-center v-for="row in textNumberRows" :key="row.index">
        <v-flex xs12 sm3 v-show="isNumberOnly">
            <v-text-field v-model="row.numberInput" label="Number Only"></v-text-field>
        </v-flex>
        <v-flex xs12 sm3 v-show="isTextAndNumber">
            <v-text-field v-model="row.textNumberInput" label="Text and Numbers"></v-text-field>
        </v-flex>
        <v-flex xs12 sm3>
            <v-select
                v-model="row.selectInputType"
                :items="selectItems"
                item-value="text"
                placeholder="Please Select"
                @change="updateInputs()"
        ></v-select>
        </v-flex>
        <v-flex xs12 sm2>
            <v-btn
                v-show="removeNumberRow"
                class="ml-0"
                flat
                icon
                color="primary"
                @click="deleteNumberRow(row)"
            >
                <v-icon size="32px">remove_circle_outline</v-icon>
            </v-btn>
        </v-flex>
    </v-layout>

Script

    addNumberRow(){
      this.textNumberRows.push({
          numberInput: '',
          textNumberInput: '',
          selectInputType: ''
      });
      if(this.textNumberRows.length > 1 ) {
        this.removeNumberRow = true
      }
    },
    deleteNumberRow(row) {
      if(this.textNumberRows.length > 1 ) {
        this.removeNumberRow = true
        this.textNumberRows.splice(this.textNumberRows.indexOf(row), 1);
      }
      if(this.textNumberRows.length <= 1){
        this.removeNumberRow = false
      }
    },
    updateInputs(){
        if(this.textNumberRows[0].selectInputType === "Numbers Only"){
            this.isNumberOnly = true
            this.isTextAndNumber = false
        }
        if(this.textNumberRows[0].selectInputType === "Numbers and Text"){
            this.isNumberOnly = false
            this.isTextAndNumber = true
        }
    }

Answer 1

You need to set a separate value for each row instead of sharing isNumberOnly and isTextAndNumber between all rows.

Try this:

Template

 <v-layout row wrap align-center v-for="(row, index) in textNumberRows" :key="row.index">
        <v-flex xs12 sm3 v-show="row.selectInputType === 'Numbers Only'">
          <v-text-field v-model="row.numberInput" label="Numbers Only"></v-text-field>
        </v-flex>
        <v-flex xs12 sm3 v-show="row.selectInputType === 'Numbers and Text'">
          <v-text-field v-model="row.textNumberInput" label="Numbers and Text"></v-text-field>
        </v-flex>
        <v-flex xs12 sm3>
          <v-select
            v-model="row.selectInputType"
            :items="selectItems"
            item-value="text"
            placeholder="Please Select"
            @change="val => row.selectInputType = val"
        ></v-select>
        </v-flex>
        <v-flex xs12 sm2>
          <v-btn
            v-show="removeNumberRow"
            class="ml-0"
            flat
            icon
            color="primary"
            @click="deleteNumberRow(row)"
          >
            <v-icon size="32px">remove_circle_outline</v-icon>
          </v-btn>
        </v-flex>
      </v-layout> 

Script

  data() {
    return {
      rowType: 'typeText',
      textRows:[
        {
          textInput: '',
        },
      ],
      textNumberRows:[
        {
          numberInput: '',
          textNumberInput: '',
          selectInputType: 'Numbers Only'
        },
      ],
      selectItems: [
        {text: 'Numbers Only'},
        {text: 'Numbers and Text'},
      ],
      removeTextRow: false,
      removeNumberRow: false,

    }
  },
  methods: {
    changeType(){
      this.textRows = [{}]
      this.removeTextRow = false
      this.textNumberRows = [{
          numberInput: '',
          textNumberInput: '',
          selectInputType: 'Numbers Only'
      }]
      this.removeNumberRow = false
    },
    addTextRow(){
      this.textRows.push({textInput: ''});
      if(this.textRows.length > 1 ) {
        this.removeTextRow = true
      }
    },
    deleteTextRow(row) {
      if(this.textRows.length > 1 ) {
        this.removeTextRow = true
        this.textRows.splice(this.textRows.indexOf(row), 1);
      }
      if(this.textRows.length <= 1){
        this.removeTextRow = false
      }
    },
    addNumberRow(){
      this.textNumberRows.push({
          numberInput: '',
          textNumberInput: '',
          selectInputType: 'Numbers Only'
        });
      if(this.textNumberRows.length > 1 ) {
        this.removeNumberRow = true
      }
    },
    deleteNumberRow(row) {
      if(this.textNumberRows.length > 1 ) {
        this.removeNumberRow = true
        this.textNumberRows.splice(this.textNumberRows.indexOf(row), 1);
      }
      if(this.textNumberRows.length <= 1){
        this.removeNumberRow = false
      }
    },
  }