Vue/Vuetiy 1.5 - 添加和删除行 + 根据所选项目显示和隐藏字段问题

Question

我有一个表单，其中包含一些显示和隐藏功能，这些功能基于您在第一个单选按钮上所做的 selection。第二部分显示 2 个输入和一个 select。根据您在 select 上的选择，输入将显示和隐藏。它在一行上工作正常，但是当我添加 2 行或更多行时，select 更改 (show/hide) 所有行上的所有输入，而不是仅 selected 行。

这是一段代码（此处提供 CodePen - https://codepen.io/fabiozanchi/pen/NWpgxVY?editors=1011）

模板

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

脚本

    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

您需要为每一行设置一个单独的值，而不是在所有行之间共享 isNumberOnly 和 isTextAndNumber。

试试这个：

模板

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

脚本

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

Vue/Vuetiy 1.5 - 添加和删除行 + 根据所选项目显示和隐藏字段问题

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

vue.js

vuetify.js