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
– adiga, Commented Jul 24, 2019 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
– Miguel Stevens, Commented Jul 24, 2019 at 11:33
@AdamOrlov you can create a runnable snippet on SO itself. Here's a Vue.js example — adiga
– adiga, Commented Jul 24, 2019 at 11:36
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
– James Whiteley, Commented Jul 24, 2019 at 11:38

Félix · Accepted Answer · 2019-07-24 11:37:07Z

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, 2019 at 11:37

Félix

4282 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Miguel Stevens Over a year ago

Aha. I was confusing :value with v-model, the two way binding seems to work.

Collectives™ on Stack Overflow

VueJS pushed new object to array, data is not reactive

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related