CODEWITHSUNDEEP
javascriptvue.jsvuejs2
Miguel Stevens
Miguel Stevens

Reputation: 9191

VueJS pushed new object to array, data is not reactive

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?

Upvotes: 3

Views: 721

Answers (1)

F&#233;lix
F&#233;lix

Reputation: 408

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">

Upvotes: 3

Related Questions