Avoid data-binding for a variable in Vue.js

user_2310611 0
Viewed 2995

I have a simple form asking for username and password. Those are my Vue.js data

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

Username and password field in the form are bound to user.username and user.password. Pressing a sign in button execute doLogin function

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

Problem is that from this moment on, every edit in the form also change the value in "submitted" field and i want to avoid that

vue.js forms binding data-binding javascript
2 Answers

Object.assign({}, object) is not working properly when you have multiple inner objects. I solve this problem with store object before change as string with JSON.stringify and then rollback object with JSON.parse like...

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

and on cancel

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

you can use this in edit data in forms and rollback data if cancel the edit.

user_57441900
Related