VueJS a poussé un nouvel objet dans le tableau, les données ne sont pas réactives.

Question

Voici ma structure de données actuelle

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

J'utilise la méthode suivante pour ajouter un objet au tableau des temps.

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

Cela ajoute l'objet au tableau, mais quand je change la valeur d'une des propriétés de l'objet, ce n'est pas réactif, je définis les propriétés from et to de l'objet comme suit

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

Si j'ajoute un objet à un tableau réactif, les propriétés de cet objet sont-elles réactives ?

Answer 1

Essayez de changer le input 's value à la propriété v-model et la suppression de l'inutile : avant l'espace réservé.

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