Javascript 多个Nuxt vuetify textfield组件作为道具

因此，我试图编写一个表单组件，可以呈现并使用不同的v模型来发出请求

组成部分：

    <v-form>
              <v-container>
                <v-row>
                  <v-col
                    cols="12"
                    md="4"
                  >
                    <v-text-field
                      label="First name"
                      required
                      autocomplete="off"
                      clearable
                      :disabled="disable"
                      v-model="modalFirstNameValue"
                      :label="modalFirstNameLabel"
                    ></v-text-field>
                  </v-col>
    
                  <v-col
                    cols="12"
                    md="4"
                  >
                    <v-text-field
                      label="Last name"
                      required
                      autocomplete="off"
                      clearable
                      :disabled="disable"
                      v-model="modalLastNameValue"
                      :label="modalLastNameLabel"
                    ></v-text-field>
                  </v-col> 
          </v-container>
        </v-form>

<script>
export default {
  props: ['modalFirstNameValue','modalFirstNameLabel'
        ],
  name: 'modal',
</script>

我想做的是能够捕获另一侧的输入值，这样我就可以使用它们通过表单发出GET或Post请求。

详细说明：

在您的组件中，您正在将

v-model

设置为组件的道具：

第一个

VTextField

：

第二个

VTextField

中也会发生同样的情况。这将提示警告/错误消息

要克服这一问题，应使用

data

将变量设置为

prop

例如：

导出默认值{
道具：[
“modalFirstNameValue”，
“modalFirstNameLabel”
],
名称：'模态'，
数据：（）=>{
名字：“
},
创建（）{
this.firstName=this.modalFirstNameValue；
}

 <template>
      <div id="app">
        <FormModal
          v-bind:modalFirstNameValue="modalFirstNameValue"
          v-bind:modalFirstNameLabel="modalFirstNameLabel"
        />
      </div>
    </template>

 Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders