vue.js - Vue/Vuetiy 1.5 - 添加和删除行+显示和隐藏基于所选项目问题的字段

Question

根据您在第一个单选按钮上所做的选择，我有一个带有一些显示和隐藏功能的表单。第二部分显示 2 个输入和一个选择。根据您在选择中选择的内容，输入将显示和隐藏。它适用于一行，但是当我添加 2 行或更多行时，选择会更改（显示/隐藏）所有行上的所有输入，而不是仅选择一个。

这是一段代码（此处提供 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
        }
    }

标签： vue.jsvuetify.js

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