2

所以我在这个主题上的搜索回来了不久前的各种 GitHub 问题跟踪讨论。

本质上，我有以下 Bootstrap Select 输入：

 <b-form-text id="countrySelectionHelp" class="text-white my-1">Country: <span class="text-danger">*</span></b-form-text>
 <b-form-select id="countrySelection" v-on:change="countryCountyConfiguration" v-model="selectedCountry" size="sm" aria-describedby="countrySelectionHelp" required>
   <option :value="null">Please select an option...</option>
   <option v-for="country in countrySelections" :value="country.value" :key="country.value">{{ country.name }}</option>
 </b-form-select>

首先，请原谅 v- 和 : 绑定语法的混合。其次，on-change 绑定触发了 countryCountyConfiguration 函数，为了便于调试，我将其剥离为最简单的形式：

...
    },
    countryCountyConfiguration() {
      console.log(this.selectedCountry);
    },
...

实际上，我能描述的最好的问题是v-on:change="countryCountyConfiguration"总是落后一步v-model="selectedCountry"......总是显示以前的 v-model 绑定。但是，我确实需要对国家/地区的反馈进行更改 - 这样如果选择 X 国家/地区，我将提供县和/或州的动态选择。

我想知道，我将如何获得v-on:change="countryCountyConfiguration"并v-model="selectedCountry"协同工作？

4

2 回答 2

3

理想情况下，这不应该发生。似乎是组件的问题。它会发生，因为change事件在负责的事件之前触发v-model。默认情况下v-model使用:valueandv-on:input作为值和事件对。

在您的情况下，您应该使用显式的单向数据绑定并避免使用v-modelas：

<b-form-select v-on:change="countryCountyConfiguration($event)" :value="selectedCountry">
    <!-- Some other code -->
</b-form-select>

你的countryCountyConfiguration意愿是：

countryCountyConfiguration(newSelectedCountry) {
    // THIS IS IMPORTANT
    this.selectedCountry = newSelectedCountry;
    // DO REST OF THE STUFF HERE
    // ...
}
于 2018-07-25T09:33:03.297 回答
0

这样做怎么样

countryCountyConfiguration() {
  this.$nextTick(() => {
    //selectedCountry must be in 'v-model'
    console.log(selectedCountry)
  });
}

使用'$nextTick'..

于 2019-01-07T03:22:19.240 回答