Vue JS V-用于组件反应性

Question

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

如果我将 :key 更改为对象而不是唯一 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 工具中的数据发生变化但是组件没有更新 - 除非我使用时间轴对象作为键！！

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

Vue.set(this.timelines, 0, event);

我不知道我做错了什么。

Answer 1

键只是一种为元素列表提供唯一标识符的方法。如果你想确保修改你的时间线列表得到你期望的结果，它必须有一个 unique 键不是的索引数组。

// 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文档非常好，推荐自己阅读。 Here is a link 通过 v-for 指令使用键。

您不需要对嵌套在其中的子元素使用 :key 属性来解决此问题，只需在具有 v-for.

的元素上

Vue JS V-用于组件反应性

Vue JS V-For component reactivity

javascript

vue-component

vuejs2

v-for