Vue.js vue中的推送组件

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

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

mdi plus

这是我的javascript

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

}
</script>

导出默认值{
数据（）{
返回{
测试1:“”，
测试2:“”
}
},
方法：{
嫁妆{
//只是为了调试的目的
console.log（this.valor）
console.log（this.precio）
}
}
}

为了推送另一对文本字段，我应该在“doWork（）”方法中添加什么

---

提前感谢您可以将字段转换为字段数组：

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>

---

工作示例：

谢谢，非常有效。这正是我想要的。通常人们希望看到一份草稿，在他们帮助你之前，你自己试一试。请试一试。提示可能是：例如，使用数组和

v-for

生成字段，并在

doWork

上向数组添加另一个条目。祝你好运