Avoid data-binding for a variable in Vue.js

Question

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

Chaim Friedman · Accepted Answer · 2017-05-12 14:09:33Z

14

You can create a copy of your data to avoid this issue.

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

Now your this.submitted and this.user are no longer referring to the same object and changing one will not change the other.

answered May 12, 2017 at 14:09

Chaim Friedman

6,2714 gold badges37 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Razinar Over a year ago

Fast as a rabbit and fixed my problem!

Yasir Rasool · Accepted Answer · 2018-08-12 12:51:18Z

0

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.

answered Aug 12, 2018 at 12:51

Yasir Rasool

444 bronze badges

Collectives™ on Stack Overflow

Avoid data-binding for a variable in Vue.js

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest