Vue-select点击加载数据异常：为何需两次点击才触发加载？

问题原因 #

用@click绑定加载事件时，第一次点击会先触发下拉框展开，此时数据还未请求完成，下拉框无内容；第二次点击时数据已加载完毕，才能显示选项。这是因为click事件的触发时机和下拉框展开的时机不匹配。

解决方案 #

1. 替换@click为Vue-select组件提供的@open事件，该事件在下拉框即将展开时触发，能保证数据加载完成后下拉框直接显示选项。
2. 给加载方法添加判断，避免重复请求数据。

修改后的代码 #

模板部分

<v2-select style="width:150px;max-width: 150px"
           @open="loadFormats"
           :searchable="false"
           :clearable="false"
           :options="formats"
           v-model="localSelectedFormat.value"
           label="nameFormat"
>
</v2-select>

方法部分

loadFormats(){
    // 已有数据则不再重复请求
    if (this.formats.length) return;
    this.getFormats().then(res => {
        this.formats = res.data;
        // 其他业务逻辑...
    })
}

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