VueJS 将新对象推送到数组，数据不是响应式的答案

【问题标题】：VueJS pushed new object to array, data is not reactiveVueJS 将新对象推送到数组，数据不是响应式的
【发布时间】：2019-12-02 13:09:19
【问题描述】：

这是我当前的数据结构


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

我正在使用以下方法将对象添加到时间数组中。

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

这会将对象添加到数组中，但是当我更改对象的属性之一的值时，它不是响应式的，我将对象的 from 和 to 属性定义如下

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

如果我将一个对象添加到一个响应式数组中，该对象的属性是响应式的吗？

【问题讨论】：

days 数组中的对象没有id 属性。是错字吗？
对不起，这是一个错字，他们确实有 id，它在复制粘贴时被遗漏了。添加到问题中，dayIndex 也不是问题，推动时间工作正常，但它正在更新该数组中似乎导致问题的对象值。谢谢
你能在 codepen 或 coresandbox 中重现吗？
@AdamOrlov 您可以在 SO 本身上创建 runnable snippet。 Here's a Vue.js example
作为一个警告，当您执行:placeholder="To" 时，您要求 Vue 将占位符属性绑定到一个名为 To 的变量。你的意思是这样做吗？如果您只是希望占位符是 To，您可以输入 placeholder="To"（不带冒号）。

标签： javascript vue.js vuejs2

【解决方案1】：

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

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

【讨论】：

啊哈。我将 :value 与 v-model 混淆了，两种方式的绑定似乎都有效。