[Vuejs]-V-switch Returns False Value When It Checked

by

1👍

✅

Bind the v-switch, using v-model, to a data value, and use that.

<v-switch
    v-model='switchValue'
    :name="['leave_it_' + listItem.asset_id]"
    @change="setAction(listItem)"
>
</v-switch>

data: {
  return {
     switchValue: false
  }
}

var action = this.switchValue ? "Leave it Alone" : "Take an Action";

Furthermore, you can lose the :name completely. And instead of @change you can watch switchValue. That’s the Vue way.

watch:{
  theSwitch(newValue){
  }
}

Here is an example of binding multiple checkboxes.

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js">
  js ">
</script>

<div id="app">
  <div v-for='i of count'>
    <label>
       Item {{i}}
       <input v-model=checks[i] type='checkbox'></input>  
  </label>
  </div>

  <div>Values: {{checks}}</div>
</div>


<script>
  var app = new Vue({
    el: '#app',
    data: {
      count: 10,
      checks: Array(10).fill(false),
    },
    watch: {
      checks(value) {
        console.log('value changed', value)
      }
    }
  })
</script>

Leave a comment