vuejs component data variable is not updated

Question

Have troubles with component. I’m using vuejs3 via CDN. I have following loop:

<div v-for="product in products">
   <product-tyre-list-card :product="product" :min="product.minimum"></product-tyre-list-card>
</div>

The component ‘product-tyre-list-card’ it self:

export default {
    props: {
        product: Object,
        min: Number
    },
    data() {
        return {
            quantity: this.min
        }
    },
    methods: {
        decrease() {
            if(this.quantity > this.product.minimum) this.quantity--;
        },
        increase() {
            this.quantity++;
        }
    },
    template: `<input v-model="quantity">`
}

So the problem is, when the first array with products is fetched from server - component quantity input is ok. So if we say initial request to server return us products array:

[
    { id: 1, minimum: 2 },
    { id: 2, minimum: 2 },
    { id: 3, minimum: 1 }
]

Products cards will be displayed correctly, we will see three products cards with input 2,2 and 1. But if then user applies some filters, and we will do request to server, and we will get new products array ie:

[
    { id: 5, minimum: 5 },
    { id: 6, minimum: 5 },
    { id: 7, minimum: 5 }
]

We will see three cards, but input will be from previous request: 2,2 and 1… (but it should be 5, 5, 5). Why is that? What I’m doing wrong?

Thanks!

Nikola Pavicevic · Accepted Answer · 2022-10-03 06:27:09Z

1

Try to set watcher on your min prop or you can use computed property with getter/setter::

const app = Vue.createApp({
  el: '#demo',
  data() {
    return {
      products: [{id: 1, minimum: 2}, {id: 2, minimum: 2}, {id: 3, minimum: 1}] 
    }
  },
  methods: {
    change() {
      this.products = [{id: 5, minimum: 5}, {id: 6, minimum: 5}, {id: 7, minimum: 5}]
    }
  }
})

app.component('product-tyre-list-card', {
  props: {
    product: Object,
    min: Number
  },
  data() {
    return {
      quantity: this.min
    }
  },
  computed: {
    qty: {
      get: function () {
        return this.min;
      },
      set: function (val) {
        this.quantity = val
      },
    },
  },
  /*watch: {
    min(val) {
      this.quantity = val
    }
  },*/
  methods: {
    decrease() {
      if(this.quantity > this.product.minimum) this.quantity--;
    },
    increase() {
      this.quantity++;
    }
  },
  template: `<div><input v-model="qty" />{{ product }}</div>`
})
app.mount('#demo')

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <button @click="change">change</button>
  <div v-for="product in products">
   <product-tyre-list-card :product="product" :min="product.minimum">
   </product-tyre-list-card>
  </div>
</div>

edited Oct 3, 2022 at 6:27

answered Oct 2, 2022 at 21:47

Nikola Pavicevic

23.6k9 gold badges30 silver badges52 bronze badges

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

1 Comment

expream Over a year ago

I thought about this. But is it really the "right way" to do it?

expream · Accepted Answer · 2022-10-03 19:37:23Z

0

I forgot to add key for v-for loop. That's solve the problem.

answered Oct 3, 2022 at 19:37

expream

211 bronze badge

Collectives™ on Stack Overflow

vuejs component data variable is not updated

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related