Question

我尝试使用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);
 },

我尝试将event与value一起使用，但是它无法正常工作。

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

Answer 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>

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

1 个答案: