[Vuejs]-Bootstrap VueJS Form select add Group Label

by

3👍

✅

Groups can be created by using an object in the options array.

This object needs to include a label property which will be displayed above the group, and a options property which will be each element in the group.

In the snippet below I’ve used a computed property instead of setting the array in the created hook, since it will be more reactive in case your Array1 or Array2 arrays change.

You can of course still use the created hook if you feel like it better fits your application.

new Vue({
  el: "#app",
  data() {
    return {
      selected: null,
      Array1: ["apple1", "apple2", "apple3"],
      Array2: ["banana1", "banana2", "banana3", "banana4"]
    };
  },
  computed: {
    ObjOptions() {
      const { Array1, Array2 } = this;

      return [
        {
          label: 'Apple',
          options: Array1
        },
        {
          label: 'Banana',
          options: Array2
        }
      ]
    }
  }
});
<link href="https://unpkg.com/bootstrap@4.5.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue@2.16.0/dist/bootstrap-vue.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.16.0/dist/bootstrap-vue.js"></script>

<div id="app">
  <b-select v-model="selected" :options="ObjOptions"></b-select>
</div>
👤Hiws

Leave a comment