时间戳

首页 > 解决方案 > v-model 奇怪的行为或在 VueJS 中是正常的

vue.js - v-model 奇怪的行为或在 VueJS 中是正常的

问题描述

我在 v-model 中看到了一个奇怪的行为，但我不知道我应该怎么称呼它。这是正常的还是奇怪的。

HTML 标记：

<div id="app">
 <div>EditItem: {{ editItem }}</div>
 <div>FormData: {{ formData }}</div>
 <input type="text" v-model="formData.name" label="name" />
</div>

脚本：

new Vue({
 el: '#app',
 data: {
   editItem: { name: 'Mr. Coder' },
   formData: null,
 },
 created() {
   this.formData = this.editItem
 },

所以我的问题是当我改变formData使用 v-model 的输入值时，它也改变了editItem值。但为什么？我已经附加了formData使用created方法的价值。所以它应该改变formData唯一的。谁能详细解释一下这种行为，或者有什么方法不会改变editItem值但只能formData使用 v-model 来改变？谢谢。

供您参考，请参阅 JSFiddle URL：https ://jsfiddle.net/nhxjp8m1/

标签： vue.js

解决方案

这不是 Vue 特定的行为，而是 JavaScript 的行为。当你写

this.formData = this.editItem

它没有创建 editItem 的副本，而是 formData 现在 REFERS to editItem。因此更改 formData 直接更改 editItem ，反之亦然。

我相信您寻求的行为需要使用将 editItem 复制到 formData 中Object.assign()。

有关 JavaScript 的更多信息，我建议浏览这个网站。

推荐阅读