如何将数据从 v-form 推入数组？

Question

目前，我有以下代码：

<template>
    <v-container>
    <v-form v-model="valid" ref="form" v-for="(resposta,index) in formData.body" :key="index">
            <v-row>
                <v-col cols="8">
                    <v-text-field
                    v-model="resposta.answer"
                    :rules="idRules"
                    :counter="200"
                    label="Texto da Resposta"
                    required
                ></v-text-field>
                </v-col>
            </v-row>

            <v-row>
                <v-col xl="2" lg="3" md="3" sm="4" class="mt-4">
                    <p class="grey--text text--darken-1">Resposta Correta:</p>
                 </v-col>
                <v-radio-group
                    v-model="resposta.correction"
                    row
                    mandatory     
                >
                    <v-col md="4" sm="4">
                        <v-radio
                        label="0"
                        value="0"
                        ></v-radio>
                    </v-col>
                    <v-col md="4" sm="4">
                        <v-radio
                        label="1"
                        value="1"
                        ></v-radio>
                    </v-col>
                </v-radio-group>
            </v-row>
                
            <v-row>
                <v-col xl="2" lg="3" md="3" sm="4" class="mt-4">
                    <p class="grey--text text--darken-1">Resposta Obrigatória:</p>
                 </v-col>
                <v-radio-group
                    v-model="resposta.mandatory"
                    row
                    mandatory     
                >
                    <v-col md="4" sm="4">
                        <v-radio
                        label="0"
                        value="0"
                        ></v-radio>
                    </v-col>
                    <v-col md="4" sm="4">
                        <v-radio
                        label="1"
                        value="1"
                        ></v-radio>
                    </v-col>
                </v-radio-group>
            </v-row>

            <v-row>
                <v-col xl="2" lg="3" md="3" sm="4" class="mt-4">
                    <p class="grey--text text--darken-1">Resposta Eliminatória:</p>
                 </v-col>
                <v-radio-group
                    v-model="resposta.eliminative"
                    row
                    mandatory     
                >
                    <v-col md="4" sm="4">
                        <v-radio
                        label="0"
                        value="0"
                        ></v-radio>
                    </v-col>
                    <v-col md="4" sm="4">
                        <v-radio
                        label="1"
                        value="1"
                        ></v-radio>
                    </v-col>
                </v-radio-group>
            </v-row>

            <v-row>
                <v-col cols="5">
                    <v-select :items="pontos"
                        v-model="resposta.points"
                        label="Pontos"
                        dense
                    ></v-select>
                </v-col>
                <v-col cols="7" align="center">
                    <v-btn @click="addAnswer" class="white--text" color="#2A3F54" grey--text>
                        Add Answer
                    </v-btn> {{formData.body}}
                </v-col>
            </v-row>
    </v-form>
    </v-container>
</template>

<script>

export default {
    data(){
        return{  
            formData:{
                body: [{
                    answer: '',
                    correction: '',
                    mandatory: '',
                    eliminative: '',
                    points:''
                }]
            }
        }   
    },
    methods: {
      addAnswer(){
        this.formData.body.push({answer: '',
            correction: '',
            mandatory: '',
            eliminative: '',
            points:''})
            alert("inserida")
      }
    },
    watch: {
        formData: {
            handler: function() {
              this.$emit('newdataRespostas', this.formData.body);
          },
            deep: true
        }
      },
}
</script>

这样做的目标是能够在另一个组件中获取数组中的信息，我可以做到这一点。这里的问题是，每次我点击“添加答案”按钮时，它都会在前一个表单的正下方创建一个新的相同表单。数据被正确地推送到数组中，另一个组件能够监视该数组中的信息，但我无法摆脱创建的新表单。如果我添加 4 个新答案，到最后我将有 5 个表格，这显然不是最佳选择。此外，欢迎提供有关代码任何部分的任何提示。我是 Vue.js 和 Vuetify 的新手。

抱歉，代码很长，但几乎所有代码都是不同的表单组件。

Answer 1

表单在 formData.body[] 上使用 v-for，因此每个数组元素（每个答案）都呈现一个新表单。听起来您只想显示最新的表单，在这种情况下您不需要 v-for.

我会用不同的数据属性替换 v-for（例如，命名为 resposta 以匹配模板中使用的当前变量），然后附加属性到 formData.body[] 在 addAnswer():

<template>
  <v-form v-model="valid" ref="form">
    <!--...-->
    <v-text-field v-model="resposta.answer" />
  </v-form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        body: [],
      },
      resposta: {},
    };
  },
  methods: {
    addAnswer() {
      this.formData.body.push(this.resposta)
      this.resposta = {}
    },
  },
}
</script>

demo

如何将数据从 v-form 推入数组？

How to push data into an array from a v-form?

vue.js

vuetify.js