I have a Vue list that is based of an array and each array item renders a ponent where I bind the array item properties.

  <div v-for="item in items">
      <item v-bind:item="item"></item>
  </div>

This ponent has a mixed data, based on the binded properties

Vueponent('item', {
  template: '<p>ID: {{item.id}}, {{ponent_id}}</p>',
  props: ['item'],
  data: function() {
    return {
      ponent_id: this.item.id
    }
  }
});

The problem is that when I change the initial list array in any way, the mixed prop of the ponent maintains it's original update and does not change, even if the original binded data changes.

How can I make the ponent to update it's ow data property?

I have a Vue list that is based of an array and each array item renders a ponent where I bind the array item properties.

  <div v-for="item in items">
      <item v-bind:item="item"></item>
  </div>

This ponent has a mixed data, based on the binded properties

Vue.ponent('item', {
  template: '<p>ID: {{item.id}}, {{ponent_id}}</p>',
  props: ['item'],
  data: function() {
    return {
      ponent_id: this.item.id
    }
  }
});

The problem is that when I change the initial list array in any way, the mixed prop of the ponent maintains it's original update and does not change, even if the original binded data changes.

http://codepen.io/anything/pen/bgQBwQ

How can I make the ponent to update it's ow data property?

• javascript
• arrays
• vue.js
• vuejs2

• 3 Shouldn't you be using a puted property in this case? – UnholySheep Commented Feb 10, 2017 at 13:09
• @UnholySheep YES! Thanks. I am really new to vuejs and I was not aware of the puted property, it works now. Thanks a ton! codepen.io/anything/pen/GrwNew – Adrian Florescu Commented Feb 10, 2017 at 13:14
• @UnholySheep, could you add your answer in order to vote it and help other people? – Mihai Alexandru-Ionut Commented Feb 10, 2017 at 13:22

1 Answer 1

As requested in the form of an answer:

In this case a puted property is the correct approach, leading to the following code:

Vue.ponent('item', {
  template: '<p>Original: {{item.id}}, Mixed: {{ponent_id}}, Computed: {{puted_id}}</p>',
  props: ['item'],
  puted: {
    puted_id: function() {
      return this.item.id;
    }
  }
});

This way the puted_id will be (correctly) reputed every time the item prop changes.