change checkbox value vuejs

Question

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 ?

cc_man · Accepted Answer · 2022-07-24 13:11:29Z

1

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

edited Jul 24, 2022 at 13:11

answered Jul 24, 2022 at 13:03

cc_man

1065 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rohìt Jíndal · Accepted Answer · 2022-07-24 13:33:27Z

0

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>

answered Jul 24, 2022 at 13:33

Rohìt Jíndal

27.4k16 gold badges80 silver badges133 bronze badges

1 Comment

user18692443 Over a year ago

thank you , i did a similar answer as you

Collectives™ on Stack Overflow

change checkbox value vuejs

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related