VueJS pushed new object to array, data is not reactive

Question

This is my current data structure


days: [
  {
    id: 0
    name: 'Monday',
    times: []
  },
  {
    id: 1
    name: 'Tuesday',
    times: []
  }
}

I'm using the following method to add an object to the times array.

onTimeAdded (dayId) {
  const dayIndex = this.days.findIndex(day => day.id === dayId)
  this.days[dayIndex].times.push({ from: '09:00', to: '18:00' })
}

This adds the object to the array, but when I change the value of one of the properties of the object, it's not reactive, I define the from and to properties of the object as follows

<input
    type="time"
    name="to"
    :placeholder="To"
    :value="time.to"
>

If I add an object to a reactive array, are the properties of that object reactive?

The objects inside `days` array don't have an `id` property. Is that a typo? — adiga, Jul 24 '19 at 11:32
Sorry it is a typo, they do have id's, it was left out during copy paste. Added to the question, the dayIndex isn't the issue as well, pushing the times is working fine, but it's updating the object values in that array that seem to cause issues. thanks — Miguel Stevens, Jul 24 '19 at 11:33
@AdamOrlov you can create a [runnable snippet](https://meta.stackoverflow.com/q/358992/3082296) on SO itself. [Here's a Vue.js example](https://stackoverflow.com/a/48151401/3082296) — adiga, Jul 24 '19 at 11:36
I don't think my issue has to do with syntax, it's a logical thing.. If I add an object to a reactive array, are the properties of that object reactive? — Miguel Stevens, Jul 24 '19 at 11:37
Just as a warning, when you do `:placeholder="To"` you are asking Vue to bind the placeholder property to a variable called `To`. Did you mean to do this? If you just literally want the placeholder to be `To`, you can just put `placeholder="To"` (without the colon). — James Whiteley, Jul 24 '19 at 11:38

score 3 · Accepted Answer · answered Jul 24 '19 at 11:37

3

Try changing the input's value property to v-model, and removing the useless : before the placeholder.

<input type="time" name="to" placeholder="To" v-model="time.to">

answered Jul 24 '19 at 11:37

Félix

388
1
9

2

Aha. I was confusing :value with v-model, the two way binding seems to work. – Miguel Stevens Jul 24 '19 at 11:40

VueJS pushed new object to array, data is not reactive

1 Answers1