Avoid mutating a prop directly in reusable components

Question

I'm trying to reuse a custom dropdown that i have created in my component file where props are the value options in dropdown. When i start to select the dropdown i realized a vue warn msg:

[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: "item"

What is the best practice & how I should write this in order to not have prop mutating value?

<template>
  <v-app>
    <SearchSelect
        v-model="newItem.a"
        :options="aList"></SearchSelect>
    <SearchSelect
        v-model="newItem.b"
        :options="bList"></SearchSelect>
    <SearchSelect
         v-model="newItem.c"
         :options="cList"></SearchSelect>
  </v-app>
</template>



<script>
export default {
  name: "Sales",
  data() {
    return {
       aList: [
          { value: "A1", text: "A1" },
          { value: "A2", text: "A2" },
          { value: "A3", text: "A3" },
          { value: "A4", text: "A4" },
          { value: "A5", text: "A5" }
       ],
       bList: [
          { value: "B1", text: "B1" },
          { value: "B2", text: "B2" },
          { value: "B3", text: "B3" }
       ],
       cList: [
          { value: "C1", text: "C1" },
          { value: "C2", text: "C2" },
          { value: "C3", text: "C3" }
       ],
     }
   }
  }
};
</script>

Steven Spungin Steven Spungin · Accepted Answer · 2019-06-09T10:53:12

Instead of mutating the property, you emit an event to the parent. The parent then mutates the value, and that new value is usually reflowed back down to the child's property.

The v-model directive in the parent works by v-binding data it 'owns' to the :value property and listening for the @input v-on event.

In your case, the owner of newItem.a should be updating it, but most likely SearchSelect is setting it instead of emitting an event.

You can also avoid the $emit to the parent by using state management, in which case the store would be the source of truth; You would then commit or dispatch instead of emit.

Avoid mutating a prop directly in reusable components

1 Answers