When attempting to modify a prop value using the @click directive, I encountered a warning message:
[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: "name"The code snippet in question is as follows:
<html>
<head>
<title>Vue test</title>
</head>
<body>
<div id="app">
<user-name name="Flavio"></user-name>
</div>
<script src="assets/js/vue.js"></script>
<script type="text/javascript">
Vue.component('user-name', {
props: ['name'],
template: '<p @click=bio1()>Hi {{ name }}</p>',
methods: {
bio1(){
this.name = "Caleb";
}
}
})
new Vue({
el: "#app"
})
</script>
</body>
</html>
What could have caused this warning to appear?