如何获取 vue-js-toggle-button 更改值答案

【问题标题】：How to get vue-js-toggle-button change value如何获取 vue-js-toggle-button 更改值
【发布时间】：2020-02-01 09:50:36
【问题描述】：

我尝试使用 Vue-js-toggle-button 包获取更改状态：

<toggle-button
  @change="onToggleChange(slider.id)"
  :labels="{checked: 'Active', unchecked: 'Deactive'}"
  :width="70"
  :sync="true"
  :value="Boolean(slider.status)"/>

并且我使用了一种方法来传递当前slider.id：

 onToggleChange(id) {
     let value = event.target.value;
     console.log(value);
 },

我尝试使用value 获取event，但它无法正常工作。

我想使用 vue js 获取切换按钮表行 slider id 和切换按钮 value。有谁可以帮忙？

【问题讨论】：

标签： jquery vue.js

【解决方案1】：

将事件作为参数传递（注意添加了$event）：

<toggle-button
  @change="onToggleChange(slider.id, $event)"

并像这样使用它：

onToggleChange(id, event) {                // added event as second arg
  let value = event.value;                 // changed from event.target.value to event.value
  console.log(value);
},

注意event does not have target。

演示：

Vue.use(window['vue-js-toggle-button'].default)

new Vue({
  el: '#app',
  data: {
    slider: {
      status: true
    }
  },
  methods: {
    onToggleChange(id, event) { // added event as second arg
      let value = event.value;  // changed from event.target.value to event.value
      console.log(value);
    },
  }
})

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-js-toggle-button"></script>

<div id="app">
  <toggle-button
    @change="onToggleChange(slider.id, $event)"
    :labels="{checked: 'Active', unchecked: 'Deactive'}"
    :width="70"
    :sync="true"
    :value="Boolean(slider.status)"/>
</div>

【讨论】：