Vue.js displays warning when we try to change the prop value directly, like this:
Vue.component('Games', {
template: `
<div>
<ol>
<li v-for="game in games">{{ game }}</li>
</ol>
<button @click="clear">Clear games</button>
</div>
`,
props: ['games'],
methods: {
clear: function () {
this.games = [];
}
}
});
The warning being displayed is:
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.
I know why that happens, but what I find surprising is that it doesn't happen with .push()
. If I change the method to add a value to the array instead of rewriting it, there's no warning:
methods: {
add: function () {
this.games.push('Whatever');
}
}
Why is there no warning? How is pushing directly to the prop fine and rewriting is not?
Array.push
from what I know, so it would make things even easier to control. Changing the props is said to be wrong in case of re-rendering. It's not about the type, but about the value being different than a value being passed in a prop. - Robo Robok