I have generated checkboxes binded to multi dimentional array when I click the checkbox doesn't pass the value he put true instead
<div class="checkboxes">
<div v-for="(role,index) in returnedroles" for="x">
<span>{{role.name}}</span>
<span v-for="(permission,index2) in permissions">
{{permission.name}} <input type="checkbox" :value="permission.id" :id="permission.id" v-model="checkedpermissions[index][index2]">
</span>
</div>
</div>
Related
I am trying to output the value of individual checkboxes and also add a class to the label when the checkbox is checked. I can do one of the other but not both together. If I add :value="attendance" the output works as individual instances but the adding of the class doesn't work and if I add value="attendance" then it treats the 2 checkboxes as one value.
Can someone help please?
<div class="container">
<div class="row">
<div class="col-sm">
<label
class="btn btn-outline-primary label-in-filter"
:class="{
showattendances:
showattendancesisChecked('attendance'),
}"
v-for="attendance in uniqueattendances"
:key="attendance"
>
<!-- <input
value="attendance"
id="attendance"
name="showattendances"
class="ck-in-filter"
type="checkbox"
v-model="attendances"
/> -->
<input
id="attendance"
name="showattendances"
class="ck-in-filter"
type="checkbox"
:value="attendance"
v-model="attendances"
/>
{{ attendance }}
</label>
</div>
<p v-for="attendance in attendances" :key="attendance">
{{ attendance }}
</p>
</div>
</div>
methods: {
showattendancesisChecked(value) {
return this.attendances.includes(value);
},}
How to put inline if in checked property on input in the vuejs?
this is my code
<div v-for="(element,index) in elements" :key="element.id" class="col">
<input type="radio" name="test[]" :value="element.id" :checked="if (index==0):'checked'">
</div>
Igot error message : avoid using JavaScript keyword as property name: "if"
Raw expression: :checked="if (index==0) 'checked'"
This is how to do:
<div v-for="(element,index) in elements" :key="element.id" class="col">
<input type="radio" name="test[]" :value="element.id" :checked="index===0 ? true: false">
</div>
I use single reactive form as insert and update operation in both case radio button needed to be checked - how can I fix this issue?
Here is the field I use
<div class="form-group">
<div class="col-sm-6">
<div class="row">
<div class="col-sm-6">
<input type="radio" formControlName="reportheader" id="reportheader0" [value]="0" (change)="isRhChanged()" [(ngModel)]="reportSettingData?.header_option"> According to present format
</div>
<div class="col-sm-6">
<input type="radio" formControlName="reportheader" id="reportheader1" [value]="1" (change)="isRhChanged()" [(ngModel)]="reportSettingData?.header_option"> Will use a customized header
</div>
</div>
</div>
</div>
</div>
Error:
Parser Error: The '?.' operator cannot be used in the assignment at column 34
For the default value to be checked, I use this code in the component:
this.rForm.patchValue({ reportheader: '0' });
So I've just got a form set up with a list checkboxes of states so that you can select multiple states, however I'm not quite sure how to put the validation on the collection of checkboxes rather than each individual one.
Right now, I have:
my-view.html
<div repeat.for="territory of availableTerritories" class="form-row">
<input type="checkbox" value.bind="territory" checked.bind="region.territories & validate">
<label>${territory}</label>
</div>
<ul if.bind="validationController.errors">
<li repeat.for="error of validationController.errors">
${error.message}
</li>
</ul>
<button class="button cancel" click.trigger="cancel()">Cancel</button>
<button class="button ok" click.trigger="saveRegion()">Save Territories</button>
my-viewmodel.js
availableTerritories = [
'US-AL',
'US-AK',
...
]
region = {
territories: []
}
constructor(validationController) {
ValidationRules
.ensure(region=>region.territories)
.required()
.minItems(1)
.on(this.region);
}
However, when I test this out with an empty input, I get a ValidationError for every checkbox rather than just the collection of them.
My ValidationError message
Territories must contain at least 1 item.
Territories must contain at least 1 item.
Territories must contain at least 1 item.
...
So I ended up adding a hidden input to the form and doing the validation on that, instead of the checkboxes themselves:
my-view.html
<div repeat.for="territory of availableTerritories" class="form-row">
<input type="checkbox" value.bind="territory" checked.bind="region.territories"> // No validation here
<label>${territory}</label>
</div>
<input type="hidden" value.bind="region.territories & validate"> //Added validation here instead
<ul if.bind="validationController.errors">
<li repeat.for="error of validationController.errors">
${error.message}
</li>
</ul>
<button class="button cancel" click.trigger="cancel()">Cancel</button>
<button class="button ok" click.trigger="saveRegion()">Save Territories</button>
I'm trying to use the debounce binding behaviour on a list of checkboxes, but it doesn't seem to be working the way I expect (I'm not sure if you can even debounce a checkbox):
<label repeat.for="v of values">
<input type="checkbox" value.bind="v" checked.bind="checkedVal & debounce:1000"> Checkbox value "${v}"
</label>
clicking on any of the checkboxes results in the checkedVal array updating immediately, whereas it works as I expect for a normal input:
<input type="text" value.bind="textVal & debounce:1000"/>
Can I debounce a checkbox input?
Here's the full code, with a GistRun here.
app.html:
<template>
<h1>Checkbox bind debounce</h1>
<form>
<label for="text">text input with debounce:1000 </label>
<input type="text" value.bind="textVal & debounce:1000"/>
<div repeat.for="v of values">
<br/>
<label>
<input type="checkbox" value.bind="v" checked.bind="checkedVal & debounce:1000"> Checkbox value "${v}"
</label>
</div>
</form>
<br/>
<p>Text value: ${textVal}</p>
<p>Checked values:</p>
<p repeat.for="v of checkedVal">${v}</p>
</template>
app.js:
export class App {
values = [1, 2, 3];
checkedVal = [];
}
Thanks!
At this time, it's not supported. The debounce binding behavior controls the rate at which the checkedVal property is assigned. In a checked binding, the property isn't assigned, the array instance referenced by the property is mutated with push and splice which circumvents the debouncing in the binding expression.