CODEWITHSUNDEEP
javascripthtmlvue.js
user18692443
user18692443

Reputation:

change checkbox value vuejs

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 class="form-check">
    <input class="form-check-input" type="checkbox" value="1" id="flexCheckDefault"
                        v-model="discount.has_limit_times_use">
     <label class="form-check-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 ?

Upvotes: 0

Views: 1729

Answers (2)

Roh&#236;t J&#237;ndal
Roh&#236;t J&#237;ndal

Reputation: 27202

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>

Upvotes: 0

cc_man
cc_man

Reputation: 106

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

Upvotes: 1

Related Questions