多个 Nuxt vuetify 文本字段组件作为道具答案

【问题标题】：Multiple Nuxt vuetify textfield components as props多个 Nuxt vuetify 文本字段组件作为道具
【发布时间】：2021-06-14 16:40:33
【问题描述】：

所以我正在尝试编写一个表单组件，我可以渲染并使用不同的 v-model 来发出请求。

组件：

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

组件导入：

 <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

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

【问题讨论】：

stackoverflow.com/questions/44446559/…

标签： javascript vue.js nuxt.js vuetify.js

【解决方案1】：

详述@Mohsen's comment：

在您的组件中，您将 v-model 设置为组件的道具：

第一VTextField：

<v-text-field
  ...
  v-model="modalFirstNameValue"
  ...
></v-text-field>

第二个VTextField 也是如此。这就是提示警告/错误消息的原因。

要克服这个问题，您应该使用created() lifecycle hook 将data 变量设置为prop。

例如：

<template>
  <!-- template code -->
  <v-form>
    <!-- ... -->
    <v-text-field
      label="First name"
      required
      autocomplete="off"
      clearable
      :disabled="disable"
      v-model="firstName"
      :label="modalFirstNameLabel"
    ></v-text-field>
    <!-- ... -->
  </v-form>
</template>

<script>
export default {
  props: [
    'modalFirstNameValue',
    'modalFirstNameLabel'
  ],
  name: 'modal',
  data: () => {
    firstName: ""
  },
  created() {
    this.firstName = this.modalFirstNameValue;
  }
</script>

【讨论】：