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

Question

这个fiddle几乎有我想要的一切：

但是我只想显示第一个子 select。至于现在，如果您首先 select 主 select 中的第一项和出现的子 select 中的某些内容，然后返回主 select 第二个选项，那么新的第三个 selectbox 出现了。

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

I am new to Vue and find it hard to see where to make that change.

Answer 1

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

简单地说，您可以在 switch 语句之前清空 cityPacks 数组。

this.cityPacks = [];

Answer 2

@Tugayİlik 的回答是正确的，但如果您想在 cityPacks 中保留 'history' 使用 select 离子，您可以添加 v-if第二个 select

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

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

您也可以使用 coumputed 获取第二个 select

的城市

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

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

Vue - How modify this code so not new selects shows up?

vue.js

element-ui