在写vue项目时遇到如下问题:
error Unexpected mutation of "todo" prop
todo是我定义的props,而vue是不允许子组件改变父组件传来的参数值的,自然不能放在v-model里了,不然就被表单乱改值。
解决方法1: ----- 不建议这样
把v-modal改为:checked,改变它的选中状态。
<input type="checkbox" :checked="todo.isCheck" />
解决方法2:
子组件使用计算属性调用父组件的方法来修改父组件的值
父组件给子组件传递方法
父组件定义方法
// 修改 todo 的 isCheck 属性的状态
const updateTodo = (todo: Todo, isCheck: boolean) => {
todo.isCheck = isCheck
console.log(todo)
}
子组件接受父组件传来的函数
计算属性调用父组件传来的方法
// 子组件
const isCheck = computed({
get(){
return props.todo.isCheck
},
set(isCheck){
props.updateTodo(props.todo, isCheck)
}
})