Question

这个小提琴几乎是我想要的全部：

但是我想只显示第一个子选择。至于现在，如果你先选择主要选择中的第一个项目，然后从子选择中选择该项目，然后返回主要选择第二个选项，则会出现新的第三个选择框。

我不希望这种情况发生。我只想要一个主要选择和第二个根据第一个选择填充。所以这两个，无论我从主要的那一次重新选择多少次。

{{1}}

Answer 1

问题是，当您选择城市时，您将同一城市推入cityPacks数组。无论存在与否，执行此操作。根据新数据填充新的选择框。

只需在switch语句之前清空cityPacks数组。

this.cityPacks = [];

Answer 2

@Tugayİlik的回答是正确的，但如果您想在cityPacks中保留使用选择的“历史记录”，可以在第二个选择中添加v-if

v-if="index === coInit.map(co => co.id).indexOf(country)"

根据应用程序的意图，可能会对数据结构进行一些其他优化。例如，不清楚为什么使用getCities方法而不仅仅将城市嵌套在coInit数组中（以及为什么需要使用setTimeout）。

您还可以使用coumputed获取第二个选择的城市

computed: {
  cities() {
    return this.country ? 
      ? this.country === 2 ? this.cFrance
      ? this.country === 3 ? this.cUSA
      : []
  }
},

Vue - 如何修改此代码，以便不显示新的选择？

2 个答案: