Update multiple data in VueJS

Question

Consider the following sample and suggest proper way to handle this problem or clear my mind from this kind of thought

data(){
   return{
       a: true,
       b: 5
   }
},
someMethod: function(){
    /*Currently update using the following lines,
      this.a = false
      this.b = 6
    */
    //Is there anything to update multiple attributes at a single line
    //Like in ReactJS
    //this.setState({})
    //Or correct my VueJS knowledge if im wrong 
}

I'm sorry. Consider a and b as different objects. Will update questions now! — Yogi
– Yogi, Commented Apr 26, 2017 at 6:41
vm.myData = {a: false, b: 6}, then make your data object have single data object inside it called myData. — Simon Hyll
– Simon Hyll, Commented Apr 26, 2017 at 6:43
this is awesome. But i need to use myData.a on all the reference instead of a. — Yogi
– Yogi, Commented Apr 26, 2017 at 6:46

tony19 · Accepted Answer · 2022-07-15 21:03:43Z

6

You can sort of do what you're asking with Object.assign(...). It offers the shallow merge as in this.setState, and you can set base level properties this way

Vue also has vm.$set(this, propName, value) and Vue.set(this, propName, value), although these offer similar functionality, they don't merge existing props with the new ones (they simply override), and they don't allow you set base level properties using the same syntax as this.setState({}) but would require you to use Vue.set(this, propName, {})

// Poor mans setState(...), only using the shallow merge
methods: {
    setState(obj) {
        Object.assign(this, obj)
    },
}

See attached pen

edited Jul 15, 2022 at 21:03

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Apr 26, 2017 at 7:28

kristoffer_remback

5704 silver badges9 bronze badges

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

1 Comment

mbokil Over a year ago

If you need IE11 support Object.assign will not work since that browser lacks the feature. You can use the Lodash polyfill for _.assign.

Collectives™ on Stack Overflow

Update multiple data in VueJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related