CODEWITHSUNDEEP
twitter-bootstrapvue.jsbootstrap-vue
Aspile Inc
Aspile Inc

Reputation: 119

How to handle Bootstrap-Vue Select easily?

<b-form-select
   v-model="form.depart"
   :options="department"
   class="depart"
   required
></b-form-select>

My coming array of object is:

[
   { id: 1, department_name: 'CSE', department_email: '[email protected]'},
   { id: 2, department_name: 'EEE', department_email: '[email protected]'},
]

This data is not loading in the Select Option. I want just department_name in the select option. Given NULL.

Upvotes: 0

Views: 33

Answers (2)

deeej
deeej

Reputation: 387

Input field

  <b-form-select
    v-model="depart"
    :options="department"
    class="depart"
    required
    value-field="department_name"
    text-field="department_name"
  ></b-form-select>

To add the "Select department" option add the following:

data() {
  return {
    depart: 'Select department',
    department: [{
        id: 0,
        department_name: 'Select department',
        disabled: true
      },
      {
        id: 1,
        department_name: 'CSE',
        department_email: '[email protected]'
      },
      {
        id: 2,
        department_name: 'EEE',
        department_email: '[email protected]'
      },
    ]

  }
}

Here is a working version https://jsfiddle.net/g3kLqscy/

Upvotes: 0

Asim Khan
Asim Khan

Reputation: 2039

Please specify your text-field and value field if these are not value and text in the array of objects. Check with the below code

<b-form-select
   v-model="form.depart"
   :options="department"
   class="depart"
   required
   value-field="department_name"
   text-field="department_name"
></b-form-select>

Upvotes: 2

Related Questions