Avoid Mutating Props Directly in a Nuxt VueJs

Question

So I see a lot of posts about this issue but I can't wrap my head as to why I am doing wrong here. I have a form that I place in a component. It's mostly made up of TextFields using vuetify. I am then reusing this form somewhere else. I've tried different things but I am still getting the error, here is my component.

  <v-window continuous  v-model="step">
                  <v-window-item :value="1">
                      <v-form>
                        <v-container>
                          <v-row>
                            <v-col
                              cols="12"
                              md="4"
                            >
                              <v-text-field
                                label="First name"
                                required
                                autocomplete="off"
                                clearable

                                v-model="modalFirstNameValue"

                              ></v-text-field>
                            </v-col>

                            <v-col
                              cols="12"
                              md="4"
                            >
                              <v-text-field
                                label="Last name"
                                required
                                autocomplete="off"
                                clearable

                                v-model="modalLastNameValue"

                              ></v-text-field>
                            </v-col>

                            <v-col
                              cols="12"
                              md="4"
                            >
                              <v-text-field
                                label="E-mail"
                                required
                                autocomplete="off"
                                clearable
                                v-model="modalEmailValue"
                              ></v-text-field>
                            </v-col>
                        </v-container>
                      </v-form>
                  </v-window-item>
<script>
export default {
  props: {
    modalFirstNameValue: {
    },
    modalLastNameValue:{

    },
    modalEmailValue:{

    },
</script>

Import Component

<template>
      <div id="app">
        <FormModal
          v-show="isModalVisible"
          @close="closeModal"
          modalTitle="Book Appointment Form"
          v-bind:modalFirstNameValue="modalFirstNameValue"
          v-bind:modalFirstNameLabel="modalFirstNameLabel"
          v-bind:modalLastNameValue="modalLastNameValue"
          v-bind:modalLastNameLabel="modalLastNameLabel"
          v-bind:modalEmailValue="modalEmailValue"
          v-bind:modalEmailLabel="modalEmailLabel"
          />
      </div>
</template>

<script>
import FormModal from "~/components/FormModal";
export default {
  name: 'app',
  components: {
    FormModal,
  },

  data(){
    return{
      modalEmailLabel         : 'Email',
      modalEmailValue         : '',
      modalLastNameLabel      : 'Last Name',
      modalLastNameValue      : '',
      modalFirstNameLabel     : 'First Name',
    }
  }
}
</script>

When I try to write in one of the text fields I get the error of avoiding mutating props, not sure I understand what is causing this. I'd like to not have this error and do best practice here. Any suggestions?

Answer 1

Problem

when passing prop to a component: it'll be passed as READ ONLY prop.

Whenever the parent component changes this prop it'll be changed also at the child component.

However, when you try to change this prop from the child component you'll get this error.

when using v-model this means that you can ( read-write ) this attribute.

Solution

To solve this problem you can check Customizing Component v-model in vue.js documentation

v-model is basically a combination between @input event and :value

so the idea is to wrap your attributes into one object and pass it using v-model

and in the child component, you can add a custom v-model event that will be triggered in each change of one of the attributes

check this working demo: