How to get vue-js-toggle-button change value

Question

I tried to get change status with Vue-js-toggle-button package:

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

And I used a method to pass current slider.id:

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

I tried to get event with value but it's not working correctly.

I want to get both toggle button table row slider id and toggle button value using vue js. Any one can help?

acdcjunior · Accepted Answer · 2019-10-03 06:13:54Z

Pass the event as argument (notice the addition of $event):

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

And use it like:

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

Notice that event does not have target.

Demo:

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>

Collectives™ on Stack Overflow

How to get vue-js-toggle-button change value

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related