Vue JS V-For 组件反应性
Posted
技术标签:
【中文标题】Vue JS V-For 组件反应性【英文标题】:Vue JS V-For component reactivity 【发布时间】:2020-03-29 12:10:56 【问题描述】:我有一个问题,当新数据传递给它时,我无法让子组件更新。数据正常通过,但组件没有更新。
如果我将 :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);
我不知道我做错了什么。
【问题讨论】:
【参考方案1】:键只是一种为元素列表提供唯一标识符的方法。如果你想确保修改你的时间线列表得到你期望的结果,它必须有一个唯一键,不是数组的索引。
// 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-For 组件反应性的主要内容,如果未能解决你的问题,请参考以下文章