[Vue warn]: Avoid mutating a prop directly

Question

How do I resolve this error message :

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "drawer"

Parent component:

<template>
  <div>
    <q-header bordered class="bg-grey-11">
      <q-toolbar>
        <q-btn

          @click="drawer = !drawer"

        />
        .....
    </q-header>

    <drawer-main :drawer="drawer"></drawer-main>
  </div>
</template>

<script>
import DrawerMain from "@/components/drawer/DrawerMain";
export default {
  props: ["miniState", "drawerClick"],
  components: {
    DrawerMain
  },
  data() {
    return {
      drawer: false
    };
  }
};
</script>

Child component :

<template>
  <q-drawer
    v-model="drawer"
    show-if-above
    :mini="!drawer || miniState"
    @click.capture="drawerClick"
  >

    <div class="q-mini-drawer-hide absolute" style="top: 15px; right: -17px">
      <q-btn
        @click="miniState = true"
      />
    </div>
  </q-drawer>
</template>

<script>
import DrawerNavigation from "@/components/drawer/DrawerNavigation";
export default {
  props: ["drawer"],
  components: {
    DrawerNavigation
  },

  data() {
    return { miniState: false };
  },
  methods: {
    drawerClick(e) {
      if (this.miniState) {
        this.miniState = false;
        e.stopPropagation();
      }
    }
  }
};
</script>

You should move v-model="drawer" into the parent component instead, and then read up on how to implement native events to the child components in this guide: vuejs.org/v2/guide/…. Alternatively, you can use v-bind.sync — Terry
It works, but it doesn't toggle the drawer all the way. I am using quasar framework: quasar.dev/layout/drawer#Click-trigger — seddka

dreijntjens dreijntjens · Accepted Answer · 2020-05-25T07:33:58

USe v-bin.sync as mentioned in the comment of @Terry or assign the prop value to a data attribute.

<template>
  <q-drawer
    v-model="internalDrawer"
    show-if-above
    :mini="!internalDrawer|| miniState"
    @click.capture="drawerClick"
  >

    <div class="q-mini-drawer-hide absolute" style="top: 15px; right: -17px">
      <q-btn
        @click="miniState = true"
      />
    </div>
  </q-drawer>
</template>

<script>
import DrawerNavigation from "@/components/drawer/DrawerNavigation";
export default {
  props: ["drawer"],
  components: {
    DrawerNavigation
  },

  data() {
    return { 
      miniState: false 
      internalDrawer: this.drawer
    };
  },
  methods: {
    drawerClick(e) {
      if (this.miniState) {
        this.miniState = false;
        e.stopPropagation();
      }
    }
  }
};
</script>

[Vue warn]: Avoid mutating a prop directly

1 Answers