Question

我有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中删除了项目，但是我提供给countdown，startDate，period，time之类的数据却没有根本不会更新，它会被代码删除的数据所覆盖。

如何解决此问题？

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

Answer 1

使用String并使用<b-card v-for="(campaign, i) in settingsData.campaigns" v-bind:key="i">代替campaign。

这意味着您要遍历settingsData.campaigns[i] / Array：Object。 settingsData.campaigns将是当前广告系列，而campaign将是该广告系列的索引。

您要遍历属性i而不是实际的对象或数组。

Vue不会在for循环中更改数组更改时的props数据

1 个答案: