Develop Reference

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 filter by checkbox true or false value

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);

How to use v-model with checkbox in vue.js?

In vue2 js, I want to use a checkbox with a v-model.
<input type="checkbox" value="test" :checked="selected"/>
I want the value of the checkbox to be test, however I want the 2 way binding with the prop called selected which is a boolean. However the above only does 1 way binding. How can I fix this?
Thanks

Use v-model instead of :checked
new Vue({
el: '#app',
data: {
selected: false
}
});
<script src="https://unpkg.com/vue#2"></script>
<div id="app">
<input type="checkbox" value="test" v-model="selected">
<div>Selected: {{selected}}</div>
</div>

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>

For attribute on label does not interact with associated input on click when id and for property are bound

I have a fairly simple component that should be outputting a checkbox and label. There are four inputs on the component: id, name, label, and value.
Here is the markup:
<div class="checkbox col-xs-12" *ngIf="id && name && label && value">
<input type="checkbox" [id]="id" [name]="name" [value]="value">
<label [for]="id" id="{{id}}-label" aria-label="not here">{{label}}</label>
</div>
When the id attribute on the input and the for attribute on the label are bound to data via [], clicking on the label does nothing.
If I hardcode the id and for attributes, they work just fine.
Using [attr.id] and [attr.for] yield the same non-working results.
What is going on here?
The resulting html is exactly what you would expected:
<div _ngcontent-wam-3="" class="checkbox col-xs-12">
<input _ngcontent-wam-3="" type="checkbox" ng-reflect-id="bob" id="bob" ng-reflect-name="bobby" name="bobby" ng-reflect-value="true" value="true">
<label _ngcontent-wam-3="" aria-label="not here" ng-reflect-html-for="bob" for="bob" ng-reflect-id="bob-label" id="bob-label">Checkbox 1</label>
</div>

Turns out this bug was because the id attribute on the custom element takes precedent over the resulting id attribute on the actual checkbox or radio button. Changing the id input to idStr lets everything work as expected.
example:
<my-checkbox name="bob" value="true" idStr="bob1" label="For Bob"></my-checkbox>