Передаю значение, которое выводится в Инпут, а по клику на кнопке передаю содержимое инпута вверх родителю.
Все бы хорошо, но в лог сыпятся предупреждения про мутацию:
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: "pname"
Попробовал прикрутить computed, не помогло. Видимо не так делаю.
Подскажите что тут не верно, плиз:
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
<todo-add
v-on:todo-new="addNewTodo"
:pname="newTodoName"
></todo-add>
<p><pre>{{todosObj}}</pre></p>
</div>
<script>
Vue.component('todo-add', {
props: ['pname'],
template:
`<ul>
<input v-model="todoName" autofocus></input>
<button v-on:click="add">Add New Todo</button>
</ul>`,
computed: {
todoName: {
set: function(val) {
this.pname = val;
},
get: function() {
return this.pname.trim();
}
}
},
methods: {
add: function() {
console.log(`emit: this.name = ${this.pname}`);
this.$emit('todo-new', this.todoName);
}
}
});
var app = new Vue({
el: "#app",
data: {
newTodoName: '',
todoArr: [
{id: 1, name: "aaaaaa"},
]
},
methods: {
addNewTodo: function(name) {
let newItem = {id: this.todoArr.length+1, name: name}
this.todoArr.push(newItem);
this.newTodoName = ''; // чистим поле ввода
}
},
computed: {
todosObj: function() {
return JSON.stringify(this.todoArr, null, 4);
}
}
});
</script>
</body>
</html>
