在 VueJS 中重置先前的选择答案

【问题标题】：Resetting previous selection in VueJS在 VueJS 中重置先前的选择
【发布时间】：2018-04-29 08:40:23
【问题描述】：

我在一个表单中有两个 custom select input 字段：Country 和 City。正如您可能已经猜到的那样，城市取决于国家。所以当用户选择一个国家时：

执行 ajax 调用
获取所选国家/地区的城市
获取的城市显示在第二个选择框中

场景：从国家选择框中，我选择了美国。从城市选择框中，我选择了德克萨斯（其值为：6）。现在如果我回到第一个选择框，将国家更改为英国，它将根据之前的选择自动选择英国的第 6 个城市。

这是我正在做的：

<custom-select type="select" name="country_id" @change="selectCountry">
   <option disabled selected>Choose a Country</option>
   <option v-for="country in countries" :value="country.id">@{{ country.name }}</option>
</custom-select>

<custom-select type="select" name="city_id" @change="selectCity">
   <option disabled selected>Choose a City</option>
   <option v-for="city in cities" :value="city.id">@{{ city.name }}</option>
</custom-select>

如何在每次选择国家时重置城市选择？

【问题讨论】：

只需在selectCountry 函数中重置城市值...
如何重置？
这完全取决于您的 selectCountry 以及您为 \custom-select 使用的变量
在我的 selectCountry() 中，我正在执行 axios 调用以获取城市。在自定义选择组件中，我没有额外的变量。
然后包括所有相关数据。

标签： javascript vue.js

【解决方案1】：

问题在于 Vue 试图重用现有的 HTML 以加快渲染速度。在您的情况下，它选择不为选择框重新呈现 HTML，它只是更改选项的文本内容。说强制重新渲染的简单方法是根据所选国家/地区使用不同的 key prop 进行城市选择：

<custom-select type="select" :key="selectedCountryId" name="city_id" @change="selectCity">
   <option disabled selected>Choose a City</option>
   <option v-for="city in cities" :value="city.id">@{{ city.name }}</option>
</custom-select>

注意，我在城市选择中添加了:key="selectedCountryId"。您需要在selectCountry 方法中创建此selectedCountryId 属性，例如：

selectCountry (e) {
  this.selectedCountryId = e.target.selectedIndex
  axios.get(...)
}

【讨论】：

这不是 HTML 问题。这是因为它将城市价值视为索引5。这意味着无论它是哪个国家，它总是会选择第 6 个城市。城市显示不是问题。
@A.Lau 稍等，直到 OP 检查它；）或者如果你愿意，你可以在我设置的这个简单演示中自己检查：codesandbox.io/s/2zkpo8532n
@dfsq，它有效！我不知道 vue 不会重新渲染。谢谢（你的）信息。另外，由于我的选项值是数字，并且我收到 value 作为 selectCountry(value) 中的参数，我可以使用它来代替：this.selectedCountryId = value; 吗？或者这是一种不好的做法？
@Eisenheim 这不是一个坏习惯，这个:key 只是需要针对不同的国家而有所不同，不管它是什么，只要它随着国家的变化而变化。

【解决方案2】：

我将通过一个简单的例子来展示如何做到这一点：

你也可以，see it in action by clicking here

<div id="app">
  <select v-model="selectedState" @change="stateChanged">
    <option :value="null">Select State</option>
    <option
      v-for="state in states"
      :key="state.id"
     :value="state.id"
     >
       {{state.text}}
     </option>
  </select>

  <select v-model="selectedCity">
    <option :value="null">Select City</option>
    <option
      v-for="city in citiesDependOnSelectedState"
      :key="city.id"
      :value="city.id"
     >
       {{city.text}}
     </option>
  </select>
</div>

new Vue({
  el: "#app",
  data: {
    states: [
      { text: "Albania", id: 1 },
      { text: "Greece", id: 2 },
      { text: "Italy", id: 3 },
      { text: "Germany", id: 4 }
    ],
    cities: [
        { text: "Tirana", id: 1, state: 1 },
      { text: "Vlora", id: 2, state: 1 },
      { text: "Thessaloniki", id: 3, state: 2 },
      { text: "Athens", id: 4, state: 2 },
      { text: "Berlin", id: 5, state: 4 },
      { text: "Hamburg", id: 6, state: 4 },
      { text: "Rome", id: 7, state: 3 },
      { text: "Milano", id: 8, state: 3 }
    ],
    selectedState: null,
    selectedCity: null
  },
  computed: {
    citiesDependOnSelectedState() {
        return this.cities.filter(el => el.state === this.selectedState)
    }
  },
  methods: {
    stateChanged() {
        this.selectedCity = null
    }
  }
})

【讨论】：