vue.js - 如何正确使用v-model和v-on:change进行输入选择？

因此，不久前，我对该主题的搜索又返回了各种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-和:绑定(bind)语法的混合使用。其次，on-change绑定(bind)正在触发countryCountyConfiguration函数，为了简化调试，我将其剥离为最简单的形式:

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

实际上，最好的办法是描述这个问题，即v-on:change="countryCountyConfiguration"总是比v-model="selectedCountry"落后一步……总是显示以前的v模型绑定(bind)。但是，我确实需要对国家/地区进行反馈，以便不断变化-这样，如果选择了X国家，我将提供动态的县和/或州选择。

我想知道如何将v-on:change="countryCountyConfiguration"和v-model="selectedCountry"结合使用？

最佳答案

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

对于您的情况，应该采用显式单向数据绑定(bind)，并避免将v-model用作:

<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
    // ...
}