js的Object.assign坑

简介: js的Object.assign坑

志当存高远。——诸葛亮

今天遇到一个坑

<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.genderinput框中输入值时发现输入不了!

这个BUG解决办法也很简单

改成这种方式就可以啦

this.user = {
  ...this.user,
  ...{name: "ruben", age: 18, gender: "男"}
}
相关文章
|
1月前
|
设计模式 JavaScript 前端开发
js中new和object.creat区别
【10月更文挑战第29天】`new` 关键字和 `Object.create()` 方法在创建对象的方式、原型链继承、属性初始化以及适用场景等方面都存在差异。在实际开发中,需要根据具体的需求和设计模式来选择合适的方法来创建对象。
|
2月前
|
JavaScript 前端开发 大数据
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
35 0
|
3月前
|
存储 JavaScript 前端开发
JS篇(Array、Object)
JS篇(Array、Object)
24 1
|
4月前
|
JavaScript 前端开发 开发者
Vue.js 响应式变革来袭!结合热点技术,探索从 Object.defineProperty 到 Proxy 的奇妙之旅,触动你的心
【8月更文挑战第30天】在 Vue.js 中,响应式系统自动追踪并更新数据变化,极大提升了开发体验。早期通过 `Object.defineProperty` 实现,但存在对新旧属性处理及数组操作的局限。Vue 3.0 引入了 `Proxy`,克服了上述限制,提供了更强大的功能和更好的性能。实践中,可根据项目需求选择合适的技术方案,并优化数据操作,利用懒加载等方式提升性能。
48 0
|
5月前
|
JSON JavaScript API
JS【详解】Map (含Map 和 Object 的区别,Map 的常用 API,Map与Object 的性能对比,Map 的应用场景和不适合的使用场景)
JS【详解】Map (含Map 和 Object 的区别,Map 的常用 API,Map与Object 的性能对比,Map 的应用场景和不适合的使用场景)
134 0
|
7月前
|
JavaScript 前端开发 索引
JavaScript与Object C的区别
JavaScript与Object C的区别
39 1
|
7月前
|
前端开发 JavaScript
前端 js 经典:Object 常用原生方法
前端 js 经典:Object 常用原生方法
110 2
|
7月前
|
JavaScript
js 字符串String转对象Object
该代码示例展示了如何将一个以逗号分隔的字符串(`&#39;1.2,2,3,4,5&#39;`)转换为对象数组。通过使用`split(&#39;,&#39;)`分割字符串并`map(parseFloat)`处理每个元素,将字符串转换成浮点数数组,最终得到一个对象数组,其类型为`object`。
374 2
|
7月前
|
JavaScript 前端开发
JavaScript中Object.prototype.toString.call()、instanceOf和Array.isArray()的区别
JavaScript中Object.prototype.toString.call()、instanceOf和Array.isArray()的区别
88 1
|
7月前
|
JavaScript
JS之Object.defineProperty方法
JS之Object.defineProperty方法