CODEWITHSUNDEEP
javascriptecmascript-6vuejs2
50l3r
50l3r

Reputation: 1559

Vue Component Data doesn't update

I need to create two components who share data. I making a item lists and item cart who add or delete the specified items.

HTML:

<script>
  var food_menu = '[{"cat":"Burgers","name":"Hamburger classic","text":"200g of meat with chips","price":"9,50"},{"cat":"Burgers","name":"Hamburger chili","text":"250g of meat with chips + drink (orange juice 0,5l)","price":"12,50"},{"cat":"Burgers","name":"Chickenburger","text":"250g of meat with chips + drink (orange juice 0,5l)","price":"10,50"},{"cat":"Burgers","name":"Chickenburger chili","text":"250g of meat with chips + drink (orange juice 0,5l)","price":"14,50"},{"cat":"Steaks","name":"Baconburger","text":"300g of meat with chips","price":"16,50"},{"cat":"Steaks","name":"Hotburger","text":"300g of meat with chips + drink (orange juice 0,5l)","price":"18,50"},{"cat":"Maxs","name":"Hotburger max","text":"450g of meat with chips","price":"21,50"},{"cat":"Maxs","name":"Chickenburger max","text":"450g of meat with chips","price":"15,50"}]';

</script>

<body>
  <main>
      <cart></cart>
      <food :menu="menu"></food>
  </main>
  <script src="https://unpkg.com/vue"></script>
</body>

The cart component:

const cart = Vue.component('cart', {
  template: `
    <div>
      <pre>{{$data}}</pre>
    </div>
  `,
  data() {
    return {
      items: []
    }
  },
  created() {
    this.$parent.$on("añadir", (item, index) => {
    alert('asdasd')
      if (typeof this.items[index] === "undefined") {
        this.items[index] = item;
        this.items[index].quantity = 1;
      } else {
        this.items[index].quantity++;
      }
    });
  }
});

The item list component (It Works)

const food = Vue.component('food', {
  props: ['menu'],
  template: `
      <div>
        <div class="food-item" v-bind:class="item.cat" v-for="(item,index) in menu">
          <h3>{{item.name}}</h3>
          <a class="add-cart" v-on:click="addToCart(item, index)">Añadir al carro</a>
          <p>{{item.text}}</p>
          <span>{{item.price}}€</span>
        </div>
    </div>
  `,
  methods: {
    addToCart(item, index) {
      this.$parent.$emit('añadir', item, index);
    }
  }
});

And the separated instances:

new Vue({
    el: 'main',
    data: {
      menu: JSON.parse(food_menu)
    },
    components: {
      'food': food,
      'cart': cart
    }
  });

When i try to modify "items" it doesnt change the template.

https://jsfiddle.net/50l3r/wu0gjz2r/6/

Upvotes: 1

Views: 1319

Answers (1)

50l3r
50l3r

Reputation: 1559

i find the problem posting on vue forums: https://forum.vuejs.org/t/vue-component-data-doesnt-update/20086

Problem caused because i can't modify array like this:

this.items[index] = newValue
this.items.length = newLength

I need to use:

Vue.set(this.items, index, newValue)

or

this.items.push()
this.items.splice()

Link to docs: https://v2.vuejs.org/v2/guide/list.html#Caveats

Upvotes: 1

Related Questions