change checkbox value vuejs - javascript

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 ?

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

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>

Related

Vue: How to display different images based on RadioButton choice

I am facing a problem where I want to display a different image if a radiobutton is selected with Vuejs. It currently only shows the image for the false state since I do not seem to be able to retrieve the state of the button in the way I tried. Here is an example with two buttons:
<template>
<div id="choose-route">
<label>
<input type="radio" name="Radio" id="choice1"
v-on:change="someMethodOne"
/>
<img
:src="checked ? 'icon_checked.png' : 'icon.png'"
/>
</label>
<label>
<input type="radio" name="Radio" id="choice2"
v-on:change="someMethodTwo"
/>
<img
:src="checked ? 'different_icon_checked.png' : 'different_icon.png'"
/>
</label>
</div>
</template>
<script>
export default {
methods: {
someMethodOne () {
// does something
},
someMethodTwo () {
// does another thing
}
}
}
</script>
<style>
</style>
How do I go about changing the image based on the checked state of the radiobutton? I already did it using CSS, but that lead to another problem due to the fact that I use recursive components which is why I am here now.
Use v-model. You can also use watch to do something when checked value change.
There is this exact example on Vue.js' website.
https://v2.vuejs.org/v2/guide/forms.html#Radio
new Vue({
el: "#app",
data: {
checked: null
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<input type="radio" id="one" value='One' v-model="checked">
<label for="one">Option one</label>
<br>
<input type="radio" id="two" value="Two" v-model="checked">
<label for="two">Option two</label>
<br>
<span>Checked: {{ checked }}</span>
<br>
<span v-if="checked === 'One'">One is checked!</span>
<span v-else-if="checked === 'Two'">Two is checked!</span>
</div>

Vue -Store Comma Separated Dynamic Checkbox ids in String

I am having a custom checkbox in vue which dynamically gets generated using a v-for loop.I need to get the ids of every checked checkbox and store it in the form of string with comma separated.
For EG: "Male , Female, Other" - these are the checked values.
But as i am generating checkboxes using a v-for the checked values are getting overridden.
Below is the fucntion that gets called on checkbox click.
updateCheckAll(e) {
let checkboxes = [];
if(e.target.checked) {
checkboxes.push(e.target.id);
}
checkboxes.join(',');
}
HTML - These are custom checkboxes.
<formfield v-for="(option,index) in getCheckBoxData" :key="index" :label="option.value">
<checkbox :id="option.key" :value="option.value" #change="updateCheckAll($event)"></checkbox>
</formfield>
You need to keep state of checked checkboxes:
data() {
return {
checked: [],
}
},
//template
<checkbox :id="option.key" :value="option.value" v-model="checked">
That is all you need to do 😉
You can check the vue documentation for more details
https://v2.vuejs.org/v2/guide/forms.html
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
new Vue({
el: '...',
data: {
checkedNames: []
}
})
Code pen
https://codepen.io/tonytomk/pen/NWxbeOB

Vue JS Radio button toggle all scenario

So I know how I can toggle all radio buttons in a group but I have a slightly niche case here. I'll try and explain as best I can here with code and comments.
SomeComponent.vue
<template>
<div>
<!-- This checkbox will toggle the selected stated of all radios -->
<input class="toggleAll" type="checkbox" :checked="checked" #change="toggleAll">
<!-- These will either toggle their own checked state or
IF the above checkbox has been checked and all checkbox are selected, it would remove the
checked state from that one
as not all the radios ARE selected anymore -->
<input :checked="checked" class="radio" type="checkbox">
<input :checked="checked" class="radio" type="checkbox">
<input :checked="checked" class="radio" type="checkbox">
<input :checked="checked" class="radio" type="checkbox">
</div>
</template>
<script>
export default {
name: 'SomeComponent',
data() {
return {
checked: false,
}
},
methods: {
toggleAll() {
this.checked = !this.checked;
}
}
}
</script>
So basically, the input with the class of toggleAll will check/uncheck all checkboxes. However, checking any of the others should uncheck the one you clicked plus the toggleAll checkbox, as not all are checked anymore.
I can't seem to get this to work! I basically need to say look for the input with the class of toggleAll and change the data "checked" to false but I don't know how to do it.
TIA
If you don't have any specific preference for the checked states, I would recommend using a list of boolean and toggle their respective states (with Vue.set to overcome the array change detection caveat).
The example below uses a computed setter/getter to reactively tell if all checkboxes are checked, and toggle them at once when the setter gets called.
By the way, I added an extra attribute (indeterminate) that you might find useful.
I'm using the .prop modifier on the "allChecked" checkbox to tell Vue that we want to bind this indeterminate as a DOM property instead of component attribute.
new Vue({
el: '#app',
data() {
return {
checkList: [false, false, false, false]
}
},
computed: {
allChecked: {
get() {
return this.checkList.every(Boolean);
},
set(isChecked) {
for (let index = 0; index < this.checkList.length; index++) {
this.$set(this.checkList, index, isChecked);
}
}
},
indeterminate() {
return !this.allChecked && this.checkList.some(Boolean);
}
}
})
#app > input[type="checkbox"] {
display: block;
}
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.11"></script>
<div id="app">
<label>
<input
v-model="allChecked"
:indeterminate.prop="indeterminate"
class="toggleAll"
type="checkbox" />
Check all
</label>
<input
v-model="checkList[index]"
v-for="(checked, index) of checkList" :key="index"
class="radio"
type="checkbox" />
</div>
It could be that your problem comes from the fact that the #change event only fires when a user interacts with the radio and changes. On the other hand, looking at your code, are you trying to change the main button's status using the checkAll method? In that case, what's the toggleAll referencing in #change="toggleAll"?
In any case, this should do it:
<template>
<div>
<input class="toggleAll" type="checkbox" :checked="checked2" #change="toggleAll">
<input :checked="checked" #change="toggleMain" class="radio" type="checkbox">
<input :checked="checked" #change="toggleMain" class="radio" type="checkbox">
<input :checked="checked" #change="toggleMain" class="radio" type="checkbox">
<input :checked="checked" #change="toggleMain" class="radio" type="checkbox">
</div>
</template>
<script>
export default {
name: 'SomeComponent',
data() {
return {
checked: false,
checked2: false
{
},
methods: {
toggleMain() {
this.checked2 = false;
}
...
}
}
</script>

Toggle input element's disabled attribute depending on a checkbox value using VueJS

I'm trying to create a form in which one text input field will have disabled attribute if a checkbox is checked. I tried:
new Vue({
el: "#app",
data: {
isChecked: false,
name: null
}
})
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
<input type="text" v-model="name" :class="{disabled: isChecked}" placeholder="disabled if box checked">
<input type="checkbox" v-model="isChecked">
</div>
Instead if using a conditional class, you can just use the property disabled and make it dynamic by adding a : in front of it and binding it to the isChecked variable. Your code will then look like this :
<div id="app">
<input type="text" v-model="name" :disabled="isChecked" placeholder="disabled if box checked">
<input type="checkbox" v-model="isChecked">
</div>

Vuejs radio button binding input

I am creating edit form page and i run this before the page loaded
beforeMount(){
if(this.$route.meta.mode === 'edit'){
this.initialize = '/api/artikel/edit/' + this.$route.params.id;
this.store = '/api/artikel/update/' + this.$route.params.id;
this.method = 'put';
}
this.fetchData();
},
and in my fetchData() method i just go to server and retrieve corresponding data to my article id.
fetchData(){
var vm = this
axios.get(this.initialize)
.then(function(response){
Vue.set(vm.$data, 'form', response.data.form);
Vue.set(vm.$data, 'rules', response.data.rules);
Vue.set(vm.$data, 'option', response.data.option);
})
.catch(function(error){
})
},
and then in my form i just bind my form data to my input and it works great in input text but not in other like in this question is input radio button
<div class="form-group">
<h5>Publish:</h5>
<label class="radio-inline">
<input type="radio" name="publish" class="styled" value="1" v-model="form.publish">
Yes
</label>
<label class="radio-inline">
<input type="radio" name="publish" class="styled" value="0" v-model="form.publish">
No
</label>
</div>
it supposed to be auto check into radio button according to the value from database... but in my case none of them checked.. but when i check manualy by clicking it... i see using the form.publish value is changed according to which radio button i check using vuejs inspector in chrome
so where do i get it wrong?
Might be a matter of how the value is coming in. Because you set values to 0/1 the radio button model needs a 0 or 1 value, and not a true/false, can you check that that's the case?
look at snipped below, see what changing to true does
new Vue({
el: '#app',
data: {
form: {}
},
methods: {
update () {
// does not work
//var form = { publish: true }
// works
var form = { publish: 1 } // <---- are you sure it's 1 and not true?
this.$set(this, 'form', form);
}
},
mounted() {
console.log(this.form)
setTimeout(this.update, 1000)
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.8/vue.min.js"></script>
<div id="app">
<div class="form-group">
<h5>Publish:</h5>
<label class="radio-inline">
<input type="radio" name="publish" class="styled" value="1" v-model="form.publish">
Yes
</label>
<label class="radio-inline">
<input type="radio" name="publish" class="styled" value="0" v-model="form.publish">
No
</label>
</div>
</div>
okay my bad.... it is not a problem with vue.js but instead because i am using uniform.js for my radio button styling from admin template that i bought in themeforest and they don't provide a clear documentation...
and after searching around i find that the javascript and css that style my radiobutton is by uniform.js and i just add a jquery code to run update the radiobutton
I have wasted few hours, and later got to know, I was missing :checked="item.isActive == true" property while binding. Adding this worked for me.
<input
class="form-check-input"
type="radio"
name="students"
v-model="item.isActive"
:checked="item.isActive== true">

Categories

Resources