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

Posted 2023-02-22

【中文标题】VueJS 将新对象推送到数组，数据不是响应式的

【英文标题】：VueJS pushed new object to array, data is not reactive

【发布时间】：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"（不带冒号）。

【参考方案1】：

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

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

【讨论】：

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