Multiple Nuxt vuetify textfield components as props

Question

So I am trying to write a form component that I can render and use different v-models to make a request.

Component:

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

Component Imported:

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

Unfortunately, I keep getting this error.

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

What I would like to do is to be able to catch the input values on the other side so that I can then use them to make GET or Post requests via the form.

https://stackoverflow.com/questions/44446559/vuetify-programmatically-showing-dialog/59337226#59337226 — Mohsen, Mar 17 '21 at 15:11

score 0 · Accepted Answer · edited Jul 16 '22 at 05:38

To elaborate on @Mohsen's comment:

In your component you are setting the v-model to the component's prop:

First VTextField:

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

The same happens in the second VTextField. This what prompts the warning/error message.

To overcome this, you should set a data variable to the prop using the created() lifecycle hook.

For example:

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

Multiple Nuxt vuetify textfield components as props

1 Answers1