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>
Related
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>
Here is my code
data() {
return {
crop_mode: 'portrait',
widget_data:''
}
},
watch: {
widget_data: function (val) {
this.crop_mode = val.crop_mode
},
},
This code is inside a modal component. So whenever a modal is opened, "widget_data" changes. And this widget_data has a "crop_mode" which needs to assigned to the data variable "crop_mode"
This works fine if I console.log the val.crop_mode but when I do v-model on crop_mode like below, it doesn't update the checked radio button.
<label class="custom-radio block">
<input
type="radio"
value="portrait"
name="crop_mode"
v-model="crop_mode"
/>
<span>Portrait</span>
</label>
<label class="custom-radio block">
<input
type="radio"
value="landscape"
name="crop_mode"
v-model="crop_mode"
/>
<span>Landscape</span>
</label>
<label class="custom-radio block">
<input
type="radio"
value="square"
name="crop_mode"
v-model="crop_mode"
/>
<span>Square</span>
</label>
You should add deep:true option because It looks like widget_data is an object with nested values:
watch: {
widget_data:{
handler(val) {
this.crop_mode = val.crop_mode
},
deep:true
}
},
In my vue app I am wanting filter a list to show only entries that have been moderated.
What I am finding though is the when the checkbox is checked, I get all the results that are true, and when the checkbox is unchecked I get all the results are false, however what I am wanting is that when the checkbox is empty no filtering takes place, and when the checkbox is checked I get results that have been moderated.
here is my attempt,
<input type="checkbox" v-model="showUnModerated" /> Show only unmoderated listings</label>
My filter code,
return this.listing.listings.filter(listing => (this.showUnModerated ? 1 : 0) === listing.moderated);
You can add an array of modified list and v-model with your checkbox.Thus you can get the modified list.
new Vue({
el: '#app',
data: {
showChecked: []
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id='app'>
<input type="checkbox" value='1' v-model="showChecked" /> element 1</label> <br>
<input type="checkbox" value='2' v-model="showChecked" /> element 2</label>
<br> {{showChecked}}
</div>
You can change the condition of filter to return all entries when the checkbox is empty(this.showUnModerated is false).
return this.listing.listings.filter(listing => (this.showUnModerated ? (1===listing.moderated) : true);
I'm working in Knockout and I'm trying to get specific information when a specific checkbox is checked. However, what's happening is every checkbox is being selected/deselected when I click on one. My question is, how do I prevent that from happening and make it to where only the check box I select/deselect is checked/unchecked?
JS
I've simplified this to show just the code I'm working with.
export class Model{
isSelected: KnockoutObservable<boolean>;
constructor(){
this.isSelected = ko.observable(false);
}
selectStuff = () => {
return true;
}
}
HTML
<div data-bind="foreach: stuffToLoopThrough">
<input type="checkbox" class="checkbox" name="checkBox" data-bind="checked: $root.isSelected, click: $root.selectStuff" />Send Stuff
<input type="checkbox" class="checkbox" name="checkBox" data-bind="checked: $root.isSelected, click: $root.selectStuff" />Send Stuff
<input type="checkbox" class="checkbox" name="checkBox" data-bind="checked: $root.isSelected, click: $root.selectStuff" />Send Stuff
</div>
So what's happening here is, if I were to click on one of the three check boxes, every checkbox would be selected, I want just the check box I selected to be checked. How do I make that happen? Where am I going wrong here?
Are you wanting multiple values selected or just one? If you just want 1 use a radio not a checkbox.
Either way, check out the checkedValue binding which allows you to store results in a variable:
http://knockoutjs.com/documentation/checked-binding.html
var stuffToLoopThrough = Model[];
var selectedValue = ko.observable();
export class Model{
isSelected: KnockoutObservable<boolean>;
constructor(){
this.uniqueValueOrId= ko.observable();
this.isSelected = ko.observable(false);
}
selectStuff = () => {
return true;
}
}
and then the html
<div data-bind="foreach: stuffToLoopThrough">
<input type="radio"
class="radio"
name="checkBox"
data-bind="checked: isSelected,
checkedValue: $root.uniqueValueOrId,
click: $root.selectStuff"> Send Stuff
</div>
notice I am not using the $root for the checked...
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">