使用Nuxt.js+Buefy时select下拉框更新后order对象数据滞后问题求助

问题描述 #

使用Nuxt.js搭配Buefy开发时，select下拉框通过v-model绑定selectedOptions.windowsLicence，同时通过@input.native="options(selectedOptions.windowsLicence)"触发方法更新order对象，但order.windowsLicence总是显示上一次的选中值，而selectedOptions.windowsLicence是实时更新的。想了解是否需要用监听器，或者能否通过计算属性解决。

现有代码 #

触发更新的方法 #

options(val){
    let selectedOption = {
        id:'54',
        title: this.selectedOptions.windowsLicence.label,
        price: this.selectedOptions.windowsLicence.price
    }
    this.order.windowsLicence = selectedOption;
},

下拉框组件代码 #

<b-field class="pt-3">
    <b-select 
       placeholder="None - $0.00"
       expanded
       @input.native="options(selectedOptions.windowsLicence)"
       v-model="selectedOptions.windowsLicence"
       icon="windows"
       icon-pack="fab"
       size="is-medium">
       <optgroup>
            <option v-for="(licence, key, index) in serverOptions.windowsLicences" :key="index" :value="{ 'id':licence.id, 'label':licence.label, 'price':licence.price }">{{licence.label}} - ${{licence.price}}.00</option>
        </optgroup>
     </b-select>
</b-field>

数据显示情况 #

• 响应式数据（实时更新）：

{{selectedOptions.windowsLicence}}

• order对象数据（滞后显示上一次选中值）：

{{order}}

问题原因与解决办法 #

问题核心是@input.native的执行时机：原生input事件触发时，Vue的响应式更新还未完成，此时selectedOptions.windowsLicence仍是旧值，导致order赋值滞后。

方案1：改用Buefy select原生@input事件（推荐） #

Buefy的b-select提供了专属的@input事件，会在v-model更新完成后触发，直接传递最新选中值：

修改下拉框代码：

<b-select 
   placeholder="None - $0.00"
   expanded
   @input="options" <!-- 直接传递最新值 -->
   v-model="selectedOptions.windowsLicence"
   icon="windows"
   icon-pack="fab"
   size="is-medium">
   <!-- 其他内容不变 -->
</b-select>

修改方法代码：

options(val){
    let selectedOption = {
        id:'54',
        title: val.label,
        price: val.price
    }
    this.order.windowsLicence = selectedOption;
},

方案2：使用Vue监听器 #

如果不想修改事件绑定，可监听selectedOptions.windowsLicence的变化，自动同步到order：

// 在组件的watch选项中添加
watch: {
    'selectedOptions.windowsLicence'(newVal) {
        if (newVal) {
            this.order.windowsLicence = {
                id:'54',
                title: newVal.label,
                price: newVal.price
            }
        }
    }
}

添加监听器后，可移除@input.native事件绑定。

方案3：计算属性（不推荐） #

计算属性是纯函数，用于推导数据而非修改状态，直接用它更新order不符合设计原则，因此不推荐此方案。

内容的提问来源于stack exchange，提问作者ottz0