Javascript Vue JS V-用于组件反应性

我有一个问题，当新数据传递给子组件时，我无法让它更新。数据传递正常，但组件不更新

如果我更改对象的：键而不是唯一ID，它会工作！但是我得到一个警告错误，不使用对象作为键，所以很明显这不是正确的方法

 <swiper ref="timelineCarousel" :options="swiperOption">
        <div slot="pagination" class="swiper-pagination kt-margin-b-10"></div>

        <!-- creates swiper slides for each timeline -->
        <swiper-slide
          v-for="timeline in timelines"
          :key="timeline.id + timeline.time"
          class="col-md-3 noSwipe"
        >
          <!-- creates the timeline draggable elements -->
          <timeline
            :id="timeline.id"
            :key="timeline.id + timeline.current_vehicle_reg"
            :hour-to-scroll-to="scrollHour"
            :day-to-scroll-to="scrollDay"
            :month-to-scroll-to="scrollMonth"
            :year-to-scroll-to="scrollYear"
          ></timeline>
        </swiper-slide>
      </swiper>

因此，当我更新this.timeline时，我可以在vue工具中看到数据更改，但组件不会更新-除非我使用timeline对象作为键

我应该补充一点，我已经在timelines对象上添加了一个观察者，当我使用以下方法更新数据时会触发该观察者：

Vue.set（this.timeline，0，event）

我不知道我做错了什么。
键只是为元素列表提供唯一标识符的一种方法。如果要确保修改时间表列表得到预期的结果，它必须具有一个唯一的键，该键不是数组的索引

// bad
<swiper-slide
  v-for="(timeline, index) in timelines"
  :key="index"
  class="col-md-3 noSwipe"
>

//坏的

通常，对象的ID可用于密钥。您不想使用复杂的数据结构，比如ID的对象

// good
<swiper-slide
  v-for="timeline in timelines"
  :key="timeline.id"
  class="col-md-3 noSwipe"
>

//很好

Vue.js文档非常好，我建议您自己阅读。使用带有
v-for
指令的键

您不需要嵌套在内部的子元素上的
：key
属性来解决此问题，只需要在元素上使用
v-for
键即可为元素列表提供唯一标识符。如果要确保修改时间表列表得到预期的结果，它必须具有一个唯一的键，该键不是数组的索引

// bad
<swiper-slide
  v-for="(timeline, index) in timelines"
  :key="index"
  class="col-md-3 noSwipe"
>

//坏的

通常，对象的ID可用于密钥。您不想使用复杂的数据结构，比如ID的对象

// good
<swiper-slide
  v-for="timeline in timelines"
  :key="timeline.id"
  class="col-md-3 noSwipe"
>

//很好

Vue.js文档非常好，我建议您自己阅读。使用带有
v-for
指令的键

您不需要嵌套在内部的子元素上的
：key
属性来解决此问题，只要在元素上使用
v-for
就可以了-谢谢。一切按预期进行。有道理-谢谢。一切正常。