Vue js dynamically added property not reactive

Question

I have a component which displays has a prop called obj. obj has two properties: obj.title and obj.body. Each is bound to a textfield so as to be reactive and editable.

<div id="app">
  <controller :obj="{title: 'TITLE'}"></controller>
</div>

<template id="controller">

  <input type="text" v-model="obj.title">
  <p>{{ obj.title }}</p>
  <input type="text" v-model="obj.body">
  <p>{{ obj.body }}</p>

</template>

The title property is part of the prop which is bound to the component. But the body property has been added dynamically during the created callback. Here is the js:

Vue.component('controller', {
  template: '#controller',
  props: ['obj'],

  created: function() {
    this.obj.body = "BODY";
  },
});

new Vue({
  el: '#app',
});

The problem is that the body property isn't behaving reactively. Changes to the body textfield are not reflected by {{ obj.body }}.

The vue website has a section about Adding and Deleting Properties, but I couldn't get their suggestions to work.

Here is a jsfiddle demonstrating the problem.

Note: it has been suggested that I declare the body property at the same time as the title property. This would work, but for my use-case the property needs to be added dynamically.

crabbly · Accepted Answer · 2016-06-07 21:26:54Z

1

Try to declare the body property when passing the prop:

<controller :obj="{title: 'TITLE', body: null}"></controller>

Or in your created method:

created: function() {
    this.obj = {
        title: this.obj.title,
        body: 'some body
    }
},

https://jsfiddle.net/crabbly/33721g9w/

edited Jun 7, 2016 at 21:26

answered Jun 7, 2016 at 20:38

crabbly

5,2261 gold badge26 silver badges48 bronze badges

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

3 Comments

asemahle Over a year ago

That would work, but for my use case I won't know if the property will be called body, or even if any extra properties will be added until the component has been been created. I've edited the question to clarify.

crabbly Over a year ago

Interesting, I can't see why a component would create different properties like that, but I updated the answer with a solution that should work for you. Check it out.

asemahle Over a year ago

I accepted my own solution because it explains why reactivity was broken, and provides a solution for the most general case. Thank you for your help, you pointed me in the right direction.

Community · Accepted Answer · 2017-05-23 11:52:29Z

1

I have selected this as the Accepted solution because it is what I would recommend to someone else with the same problem.

As user crabbly noticed, the reactivity can only be re-established if the prop's reference is updated.

I think the nicest way to do this is by making a shallow copy:

created: function() {
   this.obj.body = 'BODY'
   /**
    * ... other code that adds other properties and messes around with obj...
    */
   this.obj = Object.assign({}, this.obj);
}

... here, Object.assign is responsible for updating the reference.

This solution is currently not supported by IE, though any "clone" function will do (e.g. this.obj = jQuery.extend({}, this.obj); also works).

edited May 23, 2017 at 11:52

CommunityBot

11 silver badge

answered Jun 7, 2016 at 21:49

asemahle

20.8k4 gold badges42 silver badges38 bronze badges

Collectives™ on Stack Overflow

Vue js dynamically added property not reactive

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related