时间戳

首页 > 解决方案 > Vue.js - 道具的价值正在改变，但我从不改变它（我不希望它改变）

javascript - Vue.js - 道具的价值正在改变，但我从不改变它（我不希望它改变）

问题描述

在一个自定义组件中，我有一个 prop selectedUser定义如下：

  props: ['selectedUser'],

我有一个这样的数据道具：

   data() {
    return {
      user: this.selectedUser,
    };
  },

组件中的所有输入都有这样的 v-model 集：

<input type="text" v-model="user.first_name" />

自定义组件是添加新用户的模式。如果用户退出模式而没有保存，我可以将其重置为空白表单：

resetUser() {
  alert('resetting form');
  this.user = this.selectedUser;
  alert(this.selectedUser.first_name);
},

我希望 this.selectedUser 永远不会在组件内部更改（并且没有导致 this.selectedUser 更改的代码 - 这篇文章中只显示了 this.selectedUser 的唯一提及），但是 this.selectedUser 的值在用户在输入中输入数据，最后一个警报显示了这种情况。

我尝试通过计算属性设置数据属性用户

  computed: {
    originalUser: function() {
      return this.selectedUser;
    },
  },

但是当然你不能访问 vue 组件生命周期的数据 b/c 中的计算属性。

谁能解释为什么 this.selectedUser 正在更改和/或建议另一种方法来完成我正在尝试做的事情（顺便说一句，我想将其重置为发送到组件 b/c 的原始值，这将用作并编辑表单为以及添加）？

标签： javascriptvue.js

解决方案

data在 Vue 中是一个返回对象的函数。在您的情况下，返回的对象具有一个user属性，该属性是对prop selectedUser. 它正在返回该selectedUser对象，因为user is selectedUser，您设置它的方式。当您修改dataitemuser时，您正在修改 ，prop selectedUser因为它们是相同的。

v-model将更新建模属性[每次input事件在其组件上触发][1]。您正在更新该data属性user，并且通过扩展，prop selectedUser每次更新对象的属性时，在这种情况下first_name

可能你会想在你的created钩子中添加一个函数，设置this.user为JSON.parse(JSON.Stringify(this.selectedUser)). 这将创建该selectedUser对象的深层副本。然后，您可以根据需要进行修改this.user，然后最终在提交表单时调用任何会更新您的用户的函数。

它看起来像这样：

data() {
  return {
    user: null
  }
},
props: ['selectedUser'],
created() {
  this.user = JSON.parse(JSON.Stringify(this.selectedUser))
}

  [1]: https://vuejs.org/v2/guide/components-custom-events.html#Customizing-Component-v-model

推荐阅读