Vue.js - components data do not update

Question

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

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

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

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

The problem is that when I change the initial list array in any way, the mixed prop of the component 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 component to update it's ow data property?

@UnholySheep YES! Thanks. I am really new to vuejs and I was not aware of the computed property, it works now. Thanks a ton! codepen.io/anything/pen/GrwNew — Adrian Florescu
– 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
– Mihai Alexandru-Ionut, Commented Feb 10, 2017 at 13:22

tony19 · Accepted Answer · 2022-07-15 22:27:25Z

3

As requested in the form of an answer:

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

Vue.component('item', {
  template: '<p>Original: {{item.id}}, Mixed: {{component_id}}, Computed: {{computed_id}}</p>',
  props: ['item'],
  computed: {
    computed_id: function() {
      return this.item.id;
    }
  }
});

This way the computed_id will be (correctly) recomputed every time the item prop changes.

edited Jul 15, 2022 at 22:27

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Feb 10, 2017 at 13:25

UnholySheep

4,1164 gold badges22 silver badges26 bronze badges

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

4 Comments

Adrian Florescu Over a year ago

This is correct, but now I have another question: if a certain property does not come from the parents data, how can I update a specific value and that to be maintained: codepen.io/anything/pen/vgQgeM This has a click event and it updates a value. That is updated for a specific items, but it remains when I have the array. Any thoughts?

UnholySheep Over a year ago

@AdrianFlorescu I'm not 100% sure I understand what you are trying to achieve (and you should probably create a new question for it). If you want to combine a "component-local" variable (defined via data) with one from the prop you could just do that inside the computed one (rather than directly modifying the computed value) - e.g.: computed_id: function() { return this.item.id + this.id; } (where this.id would be a variable defined in the components data section). If this is not what you are aiming for you should probably create a new question.

Adrian Florescu Over a year ago

I should create a new question, but to answer your question, please see the pen above and click on any row. The value updates, but when I change the array, I want that value to disappear. Not sure why that sicks on the exact same row even if you change the array.

UnholySheep Over a year ago

@AdrianFlorescu In your pen the computed property is no longer connected to the prop in any way (you are accessing this.id rather than the props this.item.id) so there is nothing modifying the value of the property. And it sticks on the exact same row because of how Vue handles updates of rendered lists (in the background) - it does not recreate them from scratch, it reuses existing ones (see the docs)

Collectives™ on Stack Overflow

Vue.js - components data do not update

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related