在 bootstrap vue 的 <b-form-radio-group> 元素中使用@change 传递参数和点击值

Question

试图在 bootstrap-vue 表单中传递行记录 ID 和选定的单选按钮选项。 Beow 是带有普通 b-form-input（有效）和 b-form-radio-group（无效）的表单片段：

<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"
        />
        ...

...这是我正在使用的（简化的）函数：

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 )   
},

我从 Booststrap-vue 文档中了解到，在 @change 中为单选按钮不带括号调用函数会将单击的值传递给该函数。这本身就完美无缺。但是如果我尝试添加另一个参数 - 在本例中是来自 table 行记录的唯一 row.item.id，我将丢失该值（得到 'undefined' ).

我已经在模板中尝试了 updateRadioSettings( row.item.id, value ) 和 updateRadioSettings( value, row.item.id )，并在函数中尝试了相应的 updateRadioSettings( id, value ) 和 updateRadioSettings( value, id )。

我试过假设值无论如何都会被传递，并在函数中尝试 updateRadioSettings( row.item.id ) 和 updateRadioSettings( value, id ) 和 updateRadioSettings( id, value )。

在每种情况下，如果我尝试将任何内容传递给函数，value 将变为未定义。

有什么想法吗？是否有 Vue 或 bootstrap 属性我遗漏或忘记了它也可以保存点击值？我想我可以手动处理 Vue 的 this.$refs 并深入 that 对象以从函数本身内部找到行 ID，但不知何故感觉很脏并且不能保证在从 table.

选择该行时在该对象中设置记录 ID

Google 似乎非常缺乏找到这样的例子。我找到了 'how to send a parameter to the function' 或 'send nothing if you want the clicked value'，但没有任何建议如何同时进行。

非常感谢正确方向的戳戳、产品或建议。

Answer 1

您应该为此目的使用 $event 并告诉 vue 将事件属性发送给方法。请看下面的代码片段作为一个简单的例子：

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>

在 bootstrap vue 的 <b-form-radio-group> 元素中使用@change 传递参数和点击值

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

javascript

vue.js

bootstrap-vue

在 bootstrap vue 的 <b-form-radio-group> 元素中使用@change 传递参数*和*点击值

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

javascript

vue.js

bootstrap-vue

在 bootstrap vue 的 <b-form-radio-group> 元素中使用@change 传递参数和点击值

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