避免在Vue.js中對變量進行數據綁定

Question

我有一個簡單的表格要求用戶名和密碼。 這些是我的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;
},

問題是，從這一刻開始，表單中的每個編輯也會更改“提交”字段中的值，我想避免這種情況

Answer 1

您可以創建數據副本以避免此問題。

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

現在你的this.submitted和this.user不再引用同一個對象，更改一個不會改變另一個。

Answer 2

當您有多個內部對象時，Object.assign（{}，object）無法正常工作。 我使用JSON.stringify作為字符串更改之前使用store對象解決此問題，然后使用JSON.parse回滾對象...

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

並取消

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

如果取消編輯，您可以在表單和回滾數據中編輯數據時使用它。