CODEWITHSUNDEEP
javascriptvue.js
mark5
mark5

Reputation: 563

Avoid mutating a prop directly in reusable components

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>

Upvotes: 2

Views: 2231

Answers (1)

Steven Spungin
Steven Spungin

Reputation: 29109

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.

Upvotes: 2

Related Questions