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

Question

I have a code here:

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

search: null,
selected: [],
options: [
  {
    value: 'apple',
    text: 'Apple'
  },
  {
    value: 'orange',
    text: 'Orange'
  },
  {
    value: 'grape',
    text: 'Grape'
  }
],

I want to create a simple search regarding the code above.

From this: enter image description here

To this: enter image description here

I am using https://bootstrap-vue.org/docs/components/form-checkbox

Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. — Community
– Community Bot, Commented May 30, 2023 at 5:15

its-me-mahmud · Accepted Answer · 2023-05-31 04:10:36Z

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>

edited May 31, 2023 at 4:10

its-me-mahmud

7091 gold badge7 silver badges15 bronze badges

answered May 30, 2023 at 11:27

Gabe

2,6962 gold badges8 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related