[Vuejs]-Getting error "avoid mutate props directly" and displaying button

by

0👍

so i solve the my problem apparently i cannot directly assigned instead i declare a variable called isHidden in data() 

data(){
   isHidden : false;
}

then declare it by <payment-tab sharedButton = "isHidden">

0👍

You are facing the issue as you are directly mutating the prop in the child component and the parent isn’t notified about the same. A simple way to solve this is to sync the value of prop in the child and the parent component. So, you can change the value directly in the parent component and since props are reactive the new value of the prop would directly get assigned to the child component.

I am assuming that you’d have an option to change the value back to true in your parent component.

<payment :sharedButton.sync="sharedButton"><payment>

(The second sharedButton would be the value kept in the parent component)

Now, when you want to change the prop inside the child just use

this.$emit('update:sharedButton', false)

Leave a comment