Как получить значение изменения vue-js-toggle-button

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

Iпопытался получить event с помощью value, но он работает неправильно.

Я хочу получить строку таблицы переключателей slider id и кнопку переключателя value с помощью vue js. Кто-нибудь может помочь?

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 делаетне имеют 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>