能否将Vue Buefy的autocomplete组件用作带搜索功能的选择器？

你要实现带搜索功能、v-model绑定key值的选择器，核心是调整autocomplete的属性绑定和选中事件逻辑，你之前的代码存在标签嵌套错误、事件绑定位置错误的问题，正确实现如下：

<template>
  <b-field label="选择国家">
    <b-autocomplete
      v-model="countryLabel"
      :data="selectCountries"
      field="value"
      placeholder="搜索国家"
      open-on-focus
      clearable
      @select="handleSelectCountry"
    >
    </b-autocomplete>
  </b-field>
</template>

<script>
export default {
  data() {
    return {
      selectCountries: [
        {"value": "slovakia", "key": "SK"}, 
        {"value": "England", "key": "EN"}
      ],
      // 绑定输入框显示的文本
      countryLabel: '',
      // 实际需要提交/绑定的key值
      company: {
        country: ''
      }
    }
  },
  methods: {
    handleSelectCountry(option) {
      // 选中时给需要绑定的key赋值
      this.company.country = option.key
      this.countryLabel = option.value
    },
    // 编辑页回显时调用，传入已保存的key即可自动回填显示文本
    echoCountry(savedKey) {
      const target = this.selectCountries.find(item => item.key === savedKey)
      if (target) {
        this.company.country = savedKey
        this.countryLabel = target.value
      }
    }
  }
}
</script>

补充说明：

• 你之前的代码未闭合<b-autocomplete>就嵌套了<b-field>，属于标签结构错误，会导致组件配置不生效
• @select事件必须绑定在<b-autocomplete>标签上，不能写在父级标签属性里
• 如果需要自定义搜索过滤规则，可以新增计算属性返回过滤后的数组，替换绑定到:data的selectCountries即可

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