Variables binded to fields of b-table

Question

Lately I came across a problem with bootstrap-vue table and it's items. I made a table with items object. I also have couple of variables, which I wanted to be a part of the table items. I want to use variables as v-model of checkbox inputs in table's template for this item slot.

I tried to put a variable as an item. The variable was seen by table, but wasn't bind to it, so any change of checkbox wasn't reflected in variables values.

The code I expected to work. The table with template and checkbox input with v-model to component data variable:

<b-table class="settings-integrationsTable" outlined :items="integrationsTableItems()" :fields="print_integrations_fields">
   <template v-slot:cell(switch)="data">
      <b-form-checkbox type="checkbox" 
       v-model="data.item.model">
      </b-form-checkbox>
   </template>
</b-table>

data () {
   return {
      variable: false
   }
}
methods: {
   integrationsTableItems () {
      return {
         { model: this.variable },
      }
   }
}

I would love to put the variable directly in items as seen above and use it and bind it in my table input's v-model.

My workaround for this situation is that instead of direct variable, my model field of items is a string name of it eg. 'variable' and I made a method for returning it's value. I use the value to represent checked state of checkbox and second method changes it's state.

<template v-slot:cell(switch)="data">
   <b-form-checkbox type="checkbox" 
   :checked="getIntegrationModel(data.item.model)"
   @change="changeIntegrationModel(data.item.model)">
   </b-form-checkbox>
</template>

Is there any way my first idea would work? I may do something wrong.

Troy Morehouse Troy Morehouse · Accepted Answer · 2019-10-09T13:50:29

Two issues:

methods: {
   integrationsTableItems () {
      return {
         { model: this.variable },
      }
   }
}

Should be:

methods: {
   integrationsTableItems () {
      // b-table expects an array of items, not an object
      return [
         { model: this.variable },
      ]
   }
}

The second issue is that you are passing the value of this.variable into your items, not the reactive getter/setter bound to your component data. Updating the item's model field will only update it's value in the item object, and not the value in data.

If there is only one variable in data, then do the following:

<b-table class="settings-integrationsTable" outlined :items="integrationsTableItems()" :fields="print_integrations_fields">
   <template v-slot:cell(switch)="data">
      <!-- "model" will point to this.model (your data) -->
      <b-form-checkbox type="checkbox" v-model="model">
      </b-form-checkbox>
   </template>
</b-table>

Update (2019-10-10):

To place a getter/setter in your items data (for the item property model):

   integrationsTableItems () {
      return [
         {
           model: {
             get() => {
               return this.variable
             },
             set(val) => {
               this.variable = val
             }
           }
         },
      ]
   }

Variables binded to fields of b-table

1 Answers

Update (2019-10-10):