Search code examples
javascriptvue.jsbootstrap-vue

Pass arguments *and* clicked value with @change in bootstrap vue's <b-form-radio-group> element

Trying to pass a row record id and the selected radio button choice in a bootstrap-vue form. Beow is the snippet of the form with a normal b-form-input (which works), and a b-form-radio-group (which does not):

<b-table
  ref="selectableTable"
  :select-mode="selectMode"
  :items="dataDevices"
>
  <template #row-details="row">
    <b-card>  <!--  drops down when selecting a table row to show the editable form -->
      <b-form>
        <b-form-input 
          v-model="row.item.serialNumber"
          @change="sendUpdate( row.item.id, { 'serno': row.item.serialNumber} )"
        />
        <b-form-radio-group  
          :options="deviceOptions"
          @change="updateRadioSettings"
        />
        ...

...and here is the (simplified) function I am using:

updateRadioSettings( value ) {
  // use value to pick the right row in the array
  let jsonData = { "access": this.deviceSetupArray[value].access } 

  // send this data off to the microService
  this.sendUpdate( id, jsonData )   
},

I understand from the Booststrap-vue documentation that calling the function in the @change for the radio button without parenthesis will pass the clicked value to the function. That in and of itself works perfectly. But if I try to add another parameter - in this case the unique row.item.id from the table row record, I lose the value (gets 'undefined').

I've tried updateRadioSettings( row.item.id, value ) and updateRadioSettings( value, row.item.id ) in the template, along with corresponding updateRadioSettings( id, value ) and updateRadioSettings( value, id ) in the function.

I've tried assuming the value gets passed no matter what and tried updateRadioSettings( row.item.id ) with updateRadioSettings( value, id ) and updateRadioSettings( id, value ) in the function.

In each case, value goes undefined if I try to pass anything to the function.

Any ideas? Is there a Vue or bootstrap property I'm missing or forgetting that would also hold the clicked value? I guess I could man-handle Vue's this.$refs and walk deep down that object to find the row id from inside the function itself, but that feels dirty somehow and has no guarantee that the record id is set in that object at the time of selecting that row from the table.

Google appears to be sorely lacking in finding an example like this. I find either 'how to send a parameter to the function' or 'send nothing if you want the clicked value', but nothing suggesting how to do both.

Pokes, prods, or suggestions in the right direction are greatly appreciated.

Solution

  • you should use $event for this purpose and tell vue to send you the event property to the method. Look at the below snippet for a simple example:

    new Vue({
  el: '#app',
  data() {
    return {
      deviceOptions: [{
          text: 'Toggle this custom radio',
          value: 'first'
        },
        {
          text: 'Or toggle this other custom radio',
          value: 'second'
        },
        {
          text: 'This is the 4th radio',
          value: {
            fourth: 4
          }
        }
      ]
    }
  },
  methods: {
    updateRadioSettings(e, your_value) {
      console.log(e, your_value)
    }
  }
})
    <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.css" />

<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script>

<div id="app">
  <b-form-radio-group :options="deviceOptions" @change="updateRadioSettings($event, 'CUSTOM_VARIABLE')" />
</div>