Avoid mutating a prop directly error in vue js

Question

I created a custom DateField component. Everything is working fine but it gives the error Avoid mutating the prop 'value'. It occurs when I close the menu by clicking Cancel button or clicking outside.

Here is my code -

<template>
  <v-menu
    :close-on-content-click="false"
    :return-value.sync="value"
    max-width="290px"
    min-width="290px"
    offset-y
    ref="menu"
    transition="scale-transition"
    v-model="menu"
  >
    <template v-slot:activator="{ on }">
      <v-text-field
        :label="label"
        :placeholder="placeholder"
        :value="value"
        @input="$emit('input', $event)"
        v-on="on"
        :hint="hint"
      />
    </template>
    <v-date-picker
      :value="dateValue"
      @change="$emit('input', $event)"
      no-title
      scrollable
      :type="type"
    >
      <v-spacer/>
      <v-btn @click="menu = false" color="primary" text>Cancel</v-btn>
      <v-btn @click="$refs.menu.save(value)" color="primary" text>OK</v-btn>
    </v-date-picker>
  </v-menu>
</template>

you're doing @click="menu = false", which I'm guessing menu is referencing the $store property. You need to throw a proper commit e.g. @click= store.commit('menuOff')" — A. L

Luis Pereira Luis Pereira · Accepted Answer · 2020-06-05T15:06:00

You didn't give the script part so i'm going to do some assumptions..

In any case, you can use $emit that will send a signal to the "father component(the component that passed the menu prop)" and you can receive that signal in the father component using @emitName and changing the value there

Example:

<v-btn @click="$emit('cancel')" color="primary" text>Cancel</v-btn>

In the father component:

<SonComponent :menu="menuData" @cancel="menu=false" />

You can learn more from this here

Hope this helps.

Avoid mutating a prop directly error in vue js

1 Answers