CODEWITHSUNDEEP
vue.js
osdev
osdev

Reputation: 43

Input changins in V-for does not make update placeholder and input

I'm creating a passengers form, In this form it gets adult and child counts and children ages. At the beginning childCount equals 0 and inputs of childAges are invisible. When i increase child count, they are visible one by one. So far it is ok. However while increasing childAge, input and placeholder value do not change. By the way at the the background value is changing.

I want to be updated value in input while changing. I am sharing code via jsfiddle

Please, not only fix my code, please share how it works.

Thank you.

enter code here

Upvotes: 0

Views: 38

Answers (1)

Andrew Vasylchuk
Andrew Vasylchuk

Reputation: 4779

Due to limitations in JavaScript, Vue cannot detect the following changes to an array:

When you directly set an item with the index, e.g. vm.items[indexOfItem] = newValue. When you modify the length of the array, e.g. vm.items.length = newLength.

Reference.

increaseChildAge: function(index) {
    this.$set(this.childAges, index, this.childAges[index] + 1);
},
decreaseChildAge: function(index) {
  if (this.childAges[index] > 0) {
    this.$set(this.childAges, index, this.childAges[index] - 1);
  }
}

Upvotes: 2

Related Questions