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?

Answer 1

尝试将input的value属性更改为v-model ，并在占位符之前删除无用的: 。

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