[Vuejs]-Binding property from Object in v-model

by

1👍

✅

Two ways to get rid from the problem you are facing :

  1. Use value-field and text-field attributes in your <b-form-checkbox-group> element.

    Live Demo :

    new Vue({  
  el: '#app',
  data() {
    return {
      formData: {
        selectedBusinessLines: [],
        businessLines: [
          {id: 1, name: 'Cars'},
          {id: 2, name: 'Trucks'}, 
          {id: 3, name: 'Buses'}
        ]
      }  
    }
  }            
})
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<div id="app">
  <b-form-checkbox-group
      v-model="formData.selectedBusinessLines"
      :options="formData.businessLines"
      value-field="id"
      text-field="name">
  </b-form-checkbox-group>
</div>

  2. :options will show the options based on the text key. Hence, You can tweak the objects which will have the keys as text and value.

  • value : The selected value which will be set on v-model.

  • text : Display text, or html Display basic inline html.

    Live Demo :

    new Vue({  
  el: '#app',
  data() {
    return {
      formData: {
        selectedBusinessLines: [],
        businessLines: [
          {value: 1, text: 'Cars'},
          {value: 2, text: 'Trucks'}, 
          {value: 3, text: 'Buses'}
        ]
      }  
    }
  }            
})
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>
<script src="https:////unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<div id="app">
  <b-form-checkbox-group
      v-model="formData.selectedBusinessLines"
      :options="formData.businessLines">
  </b-form-checkbox-group>
</div>

You can have a look in this official documentation of <b-form-checkbox-group>

0👍

You need to structure your formData.businessLines that you use as options differently, like:

formData.businessLines = [
   { text: 'Cars', value: 1 },
   { text: 'Trucks', value: 2 },
   { text: 'Buses', value: 3 },
]

See example 2 in the bootstrap-vue documentation.

Leave a comment