[Vuejs]-V-model breaking bootstrap dropdown original display

by

0👍

Provide proper car brands with id and use ‘selected’ and ‘disabled’ keywords.

I hope this sample code will work for you.

<template>
  <div className="form-outline form-white mb-4">
    {{form.brand}}
    <select
      v-model="form.brand"
      className="selectpicker btn btn-secondary btn-lg dropdown-toggle form-control form-control-lg"
      data-style="btn-success"
    >
      <option v-for="brand in brands" :value="brand.id" v-bind:key="brand.id" :disabled="(parseInt(brand.id) === form.brand)" :selected="(parseInt(brand.id) === form.brand)" >{{ brand.name}} </option>
    </select>
  </div>
</template>

<script>
export default {
  data () {
    return {
      brands: [{id: 1, name: 'Brand 1'}, {id: 2, name: 'Brand 2'}, {id: 3, name: 'Brand 3'}],
      form: {
        brand: ''
      }
    }
  }
}
</script>

Leave a comment