时间戳

首页 > 解决方案 > Vue 不会更新 for 循环中数组更改的 props 数据

javascript - Vue 不会更新 for 循环中数组更改的 props 数据

问题描述

我在 for 循环中制作了元素，例如

 <b-card v-for="(campaign, i) in settingsData.campaigns" v-bind:key="i"> 
  <countdown :startDate="campaign.startDate"        
             :period="campaign.period"         
             :time="campaign.hour_every_nth"         
             :end="campaign.endDate"> 
  </countdown> 

  <b-button @click="onClickDeleteCampaign(i)">DELETE</b-button>
</b-card>

假设我settingsData.campaigns使用以下代码删除了一个项目：

onClickDeleteCampaign(index) {
  this.settingsData.campaigns.splice(index, 1);
}

它实际上从中删除了该项目，settingsData.campaigns但我提供给countdownlike startDate, period,time的数据end根本没有更新，并且它被代码删除的数据覆盖。

我该如何解决这个问题？

GIF： https ://gfycat.com/gifs/detail/LeafyFearlessGreatdane

标签： javascriptvue.jsvuejs2vue-component

解决方案

使用<b-card v-for="(campaign, i) in settingsData.campaigns" v-bind:key="i">和使用campaign而不是settingsData.campaigns[i].

这意味着您正在迭代Array/ Object: settingsData.campaigns。campaign将是当前活动，i并将成为该活动的索引。

您正在尝试迭代属性length而不是实际的对象或数组。

推荐阅读