在 vue 中推送组件

Question

每当按下“添加按钮”时，我一直在尝试推送一个文本字段。 到目前为止，这是我的代码。

<v-container fluid>
        <v-row>
          <v-col cols="7">
            <v-row class= "mx-1 my-1">
              <v-text-field outlined label="Test 1" v-model="test1"></v-text-field>
            </v-row>
          </v-col>
          <v-col cols="5">
            <v-row class= "mx-4 my-1">
              <v-text-field type="number" outlined label="Test 2" v-model="test2"></v-text-field>
            </v-row>
          </v-col>
        </v-row>
        <v-row>
          <v-col cols="12">
            <v-row class= "mx-1 my-n8">
              <v-btn
              @click="doWork()" 
              width = 100%
              small
              outlined
              color="#0000b0" 
              >
              <v-icon dark>mdi-plus</v-icon></v-btn>
            </v-row>
          </v-col>          
        </v-row>
      </v-container>

这是我的 javascript

<script>
export default {
    data () {
      return {
        test1:'',
        test2:''
      }
    },
    methods: {
      doWork () {
        //just for debugging purposes
        console.log(this.valor)
        console.log(this.precio)
      }
    }

}
</script>

我应该在“doWork()”方法中添加什么来推送另一对文本字段

提前致谢

Answer 1

您可以将您的字段转换为字段数组：

data () {
  return {
    inputs: []
  }
}

您的 addWork 方法变成了在此输入数组中推送新值的方法：

methods: {
  doWork () {
    this.inputs.push({
      label: 'Test',
      value: ''
    })
  }
} 

然后您使用 v-for 指令显示这些输入：

<v-row>
  <v-col cols="2" v-for="(input, index) in inputs" :key="index">
    <v-row class="mx-1 my-1">
      <v-text-field outlined :label="input.label" v-model="input.value"></v-text-field>
     </v-row>
   </v-col>
 </v-row>

工作示例：https://codesandbox.io/s/festive-dream-gbo6t?file=/src/App.vue