[Vuejs]-Problems with modifying props directly in vuejs vuex

by

0👍

✅

Error is because you are modifying Search prop by using v-model on your input (SearchBar component)

Do this instead:

<v-container>
    <input class='input'
      placeholder="write words for search"
      type="text"
      v-model="searchPhrase"
    />
  </v-container>
</template>
<script>
export default {
  name: "SearchBar",

  props: {
      Search: String
  },
  computed: {
    searchPhrase: {
      get() { return this.Search }
      set(val) { this.$emit('receivingSelfSearch', val) }
    }
  }
};
</script>

How using computed property for v-model works:

  1. Child receives prop Search from the parent (parent owns the data – it has Search in data())
  2. When the Child is rendering and needs initial value for the input, it calls getter (get() method) which returns value of Search prop
  3. When user changes content of input, Vue will do something like searchPhrase = new value, which in turn calls setter
  4. Setter emits the event with new value as an event payload
  5. Parent listener gets a new value and assign it into the Search data variable (@receivingSelfSearch='autoSearch')
  6. Vue detects the Search is changed and update Child component, updating Search prop inside the Child to a new value

Leave a comment