Vue JS V-对于组件的反应性

Question

我遇到一个问题，当新数据传递给子组件时，我无法更新该子组件。数据通过OK，但组件未更新。

如果将：key更改为对象，而不是唯一的ID，它将起作用！但是我收到一个警告错误，即不使用对象作为键，所以显然这不是可行的方法！！

typeahead-suggestions

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

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

<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>

我不知道我在做什么错

Answer 1

键只是将唯一标识符赋予元素列表的一种方法。如果要确保修改时间轴列表能够获得期望的结果，则它必须具有唯一键，该键不是数组的索引。

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

通常，对象的ID可以用作密钥。您不想使用像对象这样的复杂数据结构。

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

Vue.js文档非常好，我建议您自己阅读。 Here is a link到v-for指令中使用键。

您不需要嵌套在其中的子项上的:key属性即可解决此问题，只需在带有v-for的元素上即可。