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

Question

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

组件：

    <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 请求。

Answer 1

详细说明：

在您的组件中，您将 v-model 设置为组件的属性：

第一个VTextField:

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

第二个 VTextField 也是如此。这就是提示 warning/error 消息的原因。

为了克服这个问题，您应该使用 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>

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

Multiple Nuxt vuetify textfield components as props

javascript

vue.js

nuxt.js

vuetify.js