[Vuejs]-How to solve the avoid mutating a prop

by

0👍

compare is a prop, meaning that it’s to be transferred to your component, the "child" by another component (or the Vue app), the "parent". On the other end, your child component should communicate a value change to its parent using an event.

In your parent component, you can do this:

<template>
  <child-component :compare="compare" @updateCompare="compare = $event"/>
</template>

<script>
  export default { 
    data() { 
      return { compare: '' }; // Put a default value here that makes sense
    }
  };
</script>

And in your child component, you need to emit the event, so you can replace this line:

this.compare = response.data.compare;

By this one:

this.$emit('updateCompare', response.data.compare);

You can take a look at the documentation for events.

Leave a comment