如何用Vue.js与Bootstrap-Vue表单组件实现搜索功能

直接基于你现有的代码修改，核心用Vue的计算属性实时过滤选项列表：

修改后的HTML代码 #

<b-form-input v-model="search" placeholder="搜索"></b-form-input>
<b-form-checkbox-group v-model="selected" :options="filteredOptions" stacked></b-form-checkbox-group>

修改后的JS代码 #

search: null,
selected: [],
options: [
  {
    value: 'apple',
    text: '苹果'
  },
  {
    value: 'orange',
    text: '橙子'
  },
  {
    value: 'grape',
    text: '葡萄'
  }
],
computed: {
  filteredOptions() {
    // 搜索框为空时返回全量选项
    if (!this.search) return this.options
    // 统一转小写，实现不区分大小写的搜索
    const keyword = this.search.toLowerCase()
    // 过滤出文本包含关键词的选项
    return this.options.filter(item => item.text.toLowerCase().includes(keyword))
  }
}

关键说明 #

• 计算属性filteredOptions会自动监听search的输入变化，实时更新筛选后的选项列表
• 统一转小写的处理，能让搜索不区分大小写，比如输入“APPLE”也能匹配到“苹果”
• 已选中的选项不会因筛选消失而丢失状态，组件会自动保留selected数组里的value值，当选项重新出现在列表中时，选中状态会自动恢复

内容的提问来源于stack exchange，提问作者Ajmal Nor Shawali