避免对 Vue.js 中的变量进行数据绑定答案

【问题标题】：Avoid data-binding for a variable in Vue.js避免对 Vue.js 中的变量进行数据绑定
【发布时间】：2017-10-11 21:26:24
【问题描述】：

我有一个简单的表格，要求输入用户名和密码。这些是我的 Vue.js 数据

  data: {
    app_images:[
      { app: '../assets/img/logos/logo.png' }
    ],
    json_repository:[],
    user: {
      username: null,
      password: null
    },
    submitted: null
  }

表单中的用户名和密码字段绑定到 user.username 和 user.password。按登录按钮执行doLogin功能

methods: {
  doLogin: function() {
    this.submitted = this.user;
},

问题是从现在开始，表单中的每次编辑也会更改“提交”字段中的值，我想避免这种情况

【问题讨论】：

标签： javascript forms data-binding binding vue.js

【解决方案1】：

您可以创建数据副本以避免此问题。

methods: {
  doLogin: function() {
    this.submitted = Object.assign({}, this.user);
},

现在您的this.submitted 和this.user 不再指代同一个对象，更改一个对象不会更改另一个对象。

【讨论】：

像兔子一样快，解决了我的问题！

【解决方案2】：

当您有多个内部对象时，Object.assign({}, object) 无法正常工作。我用存储对象解决了这个问题，然后用 JSON.stringify 将对象更改为字符串，然后用 JSON.parse 回滚对象...

this.beforeEditingCache = JSON.stringify(this.editObject);

然后取消

this.editObject = JSON.stringify(this.beforeEditingCache);

您可以使用它来编辑表单中的数据，如果取消编辑，则可以回滚数据。

【讨论】：