Re-binding vue.js component

Question

I've got a custom Vue component that is successfully bound to a javascript object, but now would like to re-bind the component to another object. Is this possible?

Markup:

<div id="wrapper">
  <p v-component="user-profile" v-with="user"></p>
</div>

With the following component / vue:

Vue.component('user-profile', {
  template: '{{name}}<br>{{email}}'
})

var parent = new Vue({
  el: '#wrapper',
  data: {
    user: {
      name: 'Foo Bar',
      email: '[email protected]'
    }
  }
})

I'd like to re-bind the component with the following data:

user: {
  name: 'Baz',
  email: '[email protected]'
}

I don't understand what you want. It sounds like you just want to change the data. — DutGRIFF
– DutGRIFF, Commented Jun 1, 2015 at 14:25

David K. Hess · Accepted Answer · 2015-06-20 15:42:47Z

0

Just do this:

parent.user = {
   name: 'Baz',
   email: '[email protected]'
};

answered Jun 20, 2015 at 15:42

David K. Hess

17.3k2 gold badges53 silver badges77 bronze badges

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

Collectives™ on Stack Overflow

Re-binding vue.js component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related