Reputation: 191
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?
Upvotes: 3
Views: 11621
Reputation: 6532
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
Upvotes: 8