[Vuejs]-How can I implement searching with vuejs and bootstrap-vue's form-input and form-checkbox components?

by

0👍

You can use a computed property with a javascript array filter for that. Like:

export default {
  data() {
    return {
      search: '',
      options: [
        {
          value: 'apple',
          text: 'Apple',
        },
        {
          value: 'orange',
          text: 'Orange',
        },
        {
          value: 'grape',
          text: 'Grape',
        },
      ],
    }
  },
  computed: {
    filteredOptions() {
      return this.options.filter((option) =>
        option.value.includes(this.search.toLowerCase())
      )
    },
  },
}

You can find a working example here, without using your bootstrap component.

Replace the options by filteredOptions and that probably should work:

<b-form-checkbox-group v-model="selected" :options="filteredOptions" stacked></b-form-checkbox-group>

Leave a comment