v-select开启ajax+taggable+multiple时选项不显示问题求助

看起来你遇到的问题是vue-select开启taggable后，AJAX返回的搜索结果无法展示，虽然接口数据正常。我之前也碰到过类似的情况，大概率是taggable和filterable的配置冲突导致的，下面给你几个具体的解决方案：

1. 调整filterable和internal-search配置 #

你当前设置了:filterable=false，但在taggable模式下，这个配置会让组件关闭选项列表的渲染逻辑，哪怕你已经通过AJAX拿到了正确的search_options。我们需要修改这两个属性：

修改你的v-select标签，把:filterable=false改成:filterable=true，同时添加:internal-search=false（因为你已经通过AJAX自己处理了搜索过滤，不需要组件内部再做一次过滤）：

<v-select 
  placeholder="" 
  label="firstname" 
  v-model="edit_email_cc" 
  :taggable="true" 
  :filterable="true"  <!-- 修改这里 -->
  :internal-search="false"  <!-- 添加这个属性 -->
  :multiple="true" 
  :options="search_options" 
  @search:blur="handleEmailCCBlur()" 
  @search="fetchSearchOptions"
>

2. 完善自定义Tag的添加逻辑 #

为了确保用户输入的自定义邮箱能正确被添加为标签，你需要添加@tag事件来处理自定义内容的添加：

首先在v-select上绑定@tag事件：

<v-select 
  <!-- 其他属性保持不变 -->
  @tag="addCustomEmail"
>

然后在你的Vue组件methods里添加对应的处理函数：

addCustomEmail(newTag) {
  // 按照你现有option的格式，把自定义邮箱包装成对象
  const customOption = {
    firstname: newTag,
    lastname: undefined,
    email: newTag
  };
  // 添加到选中的列表中
  this.edit_email_cc.push(customOption);
}

3. 验证选项模板的兼容性 #

你的option和selected-option模板已经区分了有无lastname的情况，这个逻辑是对的，自定义的邮箱会匹配lastname == undefined的分支，显示"Send to email xxx"，选中后也能正确展示。

为什么之前的配置会出问题？ #

当taggable=true时，vue-select的内部渲染逻辑会兼顾“选择现有选项”和“创建新标签”两种场景，而filterable=false会强制关闭组件的选项列表展示，哪怕你已经给options赋值了数据。开启filterable=true并关闭internal-search，既能让组件展示你AJAX返回的搜索结果，又不会干扰你自己的搜索逻辑。

按照上面的修改后，应该就能正常展示搜索选项，同时支持添加自定义邮箱标签了。如果还是有问题，可以检查一下vue-select的版本，确保是较新的稳定版，避免版本bug导致的问题。

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