志当存高远。——诸葛亮
今天遇到一个坑
<template> <div> <el-form> <el-form-item> <el-input v-model="user.name"></el-input> <el-input v-model="user.age"></el-input> <el-input v-model="user.gender"></el-input> <el-button type="primary" @click="toYoung">点我</el-button> </el-form-item> </el-form> </div> </template> <script> export default { data() { return { user: {name: "achao", age: 20}, info: {name: "ruben", age: 18, gender: "男"} } }, created() { console.log(this.$route) }, methods: { toYoung() { Object.assign(this.user, {name: "ruben", age: 18, gender: "男"}) console.log(this.user) } }, } </script>
这里可以看到
我们点击按钮后调用toYoung
里面执行了Object.assign(this.user, {name: "ruben", age: 18, gender: "男"})
这个函数是用后面的参数填充前面的参数
我们执行前页面如下
执行后
表面看上去好像OK
实际上我们在第三个user.gender
的input
框中输入值时发现输入不了!
这个BUG
解决办法也很简单
改成这种方式就可以啦
this.user = { ...this.user, ...{name: "ruben", age: 18, gender: "男"} }