change checkbox value vuejs-CodePudding

I need to change the checkbox value, Instead of true to be 1 and instead of false to be 0.

Here's my code :

<div >
    <input  type="checkbox" value="1" id="flexCheckDefault"
                        v-model="discount.has_limit_times_use">
     <label  for="flexCheckDefault">
                        Limit number of times this discount can be used in total
      </label>
</div>

I tried this code but it doesn't work. Can someone help me on this ?

CodePudding user response：

You can try this, it is documented in Vue 3 Form input bindings.

string value:

<input type="checkbox" v-model="discount.has_limit_times_use" true-value="1" false-value="0">

number value:

<input type="checkbox" v-model="discount.has_limit_times_use" :true-value="1" :false-value="0">

CodePudding user response：

Observation: As you are having v-model attribute in your input element. Then you can achieve the checkbox value binding via v-model itself.

Demo :

new Vue({
  el: '#app',
  data: {
    discount: {
        has_limit_times_use: 1
    }
  },
  methods: {
    getVal() {
      console.log(this.discount.has_limit_times_use)
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input type="checkbox" :true-value="1" :false-value="0" v-model="discount.has_limit_times_use" @change="getVal">
</div>