Passing checkbox true or false VueJS

Question

I have a checkbox on my VueJS site, I want to do the following: if the checkbox special is true, then send in database value 1 in column, how can I do this correctly?

I did like this:

<label class="checkbox-control">
  <input type="checkbox" v-model="special"  v-on:change="special"  :disabled="channel.length === 0">

  <div class="checkbox-control__content"><i></i>Test</div>
</label>

data() {
    return {
      channel: "",
      special: false,
    }
    sendFunction() {
      this.$root.axios.post("/user/userPromo", {
        channel: this.channel,
        special: this.special
      }).then((res) => {
        const data = res.data;
        this.$root.showNotify(data.type, this.$t(`index.${data.message}`, {
          name: data.name
        }));
      });
    },

And in backend when i add data in table, i use $special = $r->get('special');, but it doesn't want to work. When is my mistake?

tony19 · Accepted Answer · 2022-07-15 02:14:35Z

You can use: true-value="1" false-value="false"

<input type="checkbox" v-model="toggle" true-value="1" false-value="false" />

// when checked:
vm.toggle === '1'
// when unchecked:
vm.toggle === 'false'

Vue2 and Vue3 :

https://v3.vuejs.org/guide/forms.html#checkbox-2

https://v2.vuejs.org/v2/guide/forms.html#Checkbox

Then use this.special inside methods sendFunction:

var app = new Vue({
  el: '#app',
  data: {
    special: false
  },
  methods: {
    sendFunction: function(event) {
    
      console.log(this.special)
      
      //this.$root.axios.post("/user/userPromo", {
        //channel: this.channel,
        //special: this.special
      //}).then((res) => {
        //const data = res.data;
        //this.$root.showNotify(data.type, this.$t(`index.${data.message}`, {
          //name: data.name
        //}));
      //});
    }  
  }
})

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<div id="app">
  <input type="checkbox" v-model="special" v-on:change="sendFunction" true-value="1" false-value="false">
</div>

Also if if this.special wont be available inside axios it means this will be bound to axios function so you need to save data before and use it inside as saved variable:

 sendFunction: function(event) {
        const value = this.special      
          this.$root.axios.post("/user/userPromo", {
          //use value here

Collectives™ on Stack Overflow

Passing checkbox true or false VueJS

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related