Initializing checkboxes in vue-bootstrap b-table rows

Question

I am working on a page using vue-bootstrap that has a b-form-checkbox-group embedded in each row. Those are appearing fine. The problem comes when I try to assign values to the checked prop. When i assign a static number the boxes will be checked like they should be when the page loads but when I try to set it up to receive responses from jquery get calls the boxes are only sometimes filled with no pattern as far as I can see.

<nit-card :title="host">
        <b-table
            :items="interfaceNames"
            :fields="switch_interface_config_col_names">
            <template slot="tagged" slot-scope="row">
                <b-form-checkbox-group  :options="vlans"
                                        :checked="interfaceNames[row.index].taggedVlans"
                                        stacked>
                </b-form-checkbox-group>
            </template>
            <template slot="untagged" slot-scope="row">
                <b-form-radio-group :options="vlans"
                                    :checked="interfaceNames[row.index].untaggedVlans"
                                    stacked>
                </b-form-radio-group>
            </template>
        </b-table>
</nit-card>

Above is the html for the table. nit-card is a vue.component that looks like this.

Vue.component('nit-card', {
   props: ['title'],
   template:   `
                 <div class="card">
                     <div class="card-header">
                         <h2 class="card-title">{{ title }}</h2>
                     </div>
                     <div class="card-body">
                         <slot></slot>
                     </div>
                 </div>
             `
})

And some of the js code with an exmaple of ine of the methods that are called to get the data for the checked prop.

let generic_name = new Vue({
   el: '#generic_name',
   data: function(){
       return{
           interfaceNames: [],
           vlans: [],
           switch_interface_config_col_names: [
               {key: "interfaceName", sortable: true},
               {key: "description", sortable: false},
               {key: "tagged", sortable: false},
               {key: "untagged", sortable: false},
           ],
           submit_params: [
              ["Switch", "text", "Hostname or IP", true],
              ["Interface", "text", "Interface Name", true],
          ],
          host: "",    
      }


  },
methods: {
    getTagged: function(){
         let that = this
         for(let i = 0; i < that.interfaceNames.length; i++){
             let url_encoding_re = /\//g;
             let interfaceName = that.interfaceNames[i].interfaceName.replace(url_encoding_re, '%5c')
             $.get(api_url + "/switches/" + that.host + "/interfaces/" + interfaceName + "/vlans/tagged", function(response) {
                 console.log(response)
                 that.interfaceNames[i].taggedVlans = response.vlans
                 })
             }
     },
}

The way that I imagine it flowing is that the interfaceNames array stores the data and then it is accessed by the html using the row.index value. What is actually happening is that maybe half of the checkbox forms have the checked values in their checked prop even though when I look at the root vue the values are present in interfaceNames[x].taggedVlans.

What do i need to do to have the checked prop filled consistently for these check-box-groups?

EDIT: By toggling the table with a v-if manually (Ex a button after the table renders) all of the checkboxs will appear correctly. Once I have a reliable way to toggle automatically the table I will post it here.

Ian Hagen Ian Hagen · Accepted Answer · 2018-07-30T17:34:16

The issue came from how i was adding the objects to the interfaceNames array. Vue.js cant detect changes made to arrays when you directly set the value through the index. To make the array reactive use Vue.set(this.arrayName, indexValue, new value) (as seen here https://vuejs.org/v2/guide/list.html#Caveats)

For this specific example above Vue.set(that.interfaceNames, i, {key: value, key: value, ...}) worked. Since it was done in a loop for all the values of the array the entire array was made reactive.

Initializing checkboxes in vue-bootstrap b-table rows

1 Answers