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);
},}
I've added kendo-grid like this:
https://www.telerik.com/kendo-vue-ui/components/grid/selection/#toc-checkbox-selection
But when I investigate my source code under console I don't see tags "id" and "for"
<td role="gridcell">
<input class="k-checkbox" data-role="checkbox" aria-label="Select row" aria-checked="false" type="checkbox">
<label class="k-checkbox-label k-no-text"></label>
</td>
In my vueJs project, i have a table that displays some products data from the database. When i click on a product tr, it should open a modal that displays a form to enter further details for the product clicked like so:
<table class="table table-responsive table-bordered">
<thead>
<tr>
<th>ID</th>
<th>Product Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr v-for="prod in products" :key="prod.id">
<td>{{ prod.id }}</td>
<td>{{ prod.name }}</td>
<td><button class="btn btn-success btn-sm" #click.prevent="addStocks(prod)">Add Stock</button></td>
</tr>
</tbody>
</table>
Now in my script, i have a method to open the modal and pass the value of the item clicked to the modal like so;
addStocks(prod){
this.$modal.show('add-stocks')
this.newStock.unitPrice = prod.sellin_price
this.newStock.id = prod.id
this.newStock.name = prod.name
},
and my data object
data() {
return {
newStock: {
id: null,
name: '',
size: '',
srln: '',
colour: '',
mfg: '',
expiry: '',
selling_price: ''
},
}
}
and the modal component
<modal name="add-stocks" height="auto" :draggable="true" :width="600">
<div class="modal-header">
<h4>Add new stock</h4>
</div>
<div class="modal-body form-horizontal">
<div class="form-group">
<label for="unitPrice" class="control-label col-md-2">Unit Price</label>
<div class="col-md-4">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">₦</span>
<input class="form-control" v-model="newStock.unitPrice" readonly aria-describedby="basic-addon1">
</div>
</div>
<div style="clear:both"></div>
</div>
<div class="form-group">
//form fields here
</div>
<div class="modal-footer modal_btns">
<button class="btn btn-primary" #click.prevent="uploadStock">Save</button>
<button class="btn btn-danger" #click.prevent="cancelUpload">Cancel</button>
</div>
</modal>
Now, the issue is when i fill the fields in the modal and click on the cancel button (without saving), i expect the fields to be cleared so when i click on another product tr, i get a fresh form, but this is not the case, the details filled into the previously closed modal form displays. In the cancelUpload methods, i have cleared the fields before closing the modal;
cancelUpload(){
this.$modal.hide('add-stocks')
this.newStock.unitPrice = prod.sellin_price
this.newStock.id = prod.id
this.newStock.name = prod.name
}
When i click on the save button and after api call is made, i call this method to hide the modal but the same issue occurs as the details display when next i open another modal.
How do i fix this?
First of all check whether your method is called everytime the modal is being closed i.e either by clicking on cancel button,cross sign or esc key.
Next this could be the issue of vue reactivity.
An object property should be updated using set method in vue js to keep it reactive.
Hence try as below.
cancelUpload(){
this.$modal.hide('clear-stocks')
this.$set(this.newStock,unitPrice,'');
this.$set(this.newStock,id,'');
this.$set(this.newStock,name,'');
}
You can clear other properties also in the above method.
Or else in the addStocks method also you can set the rest of properties to empty.
More on Vue.set here.
I am trying to loop trough an array of objects that have an array of "dependent"-objects in them. For every dependent there is an array of, up to three ENUMS, AssignmentRoles. So for every AssignmentRole I want to display some html. My problem is I am displaying all three of the AssignmentRoles for every dependent even though they dont have every AssignmentRole in their AssignmentRole Array. This is what I am working with, and trying to do:
The object:
and this is the html:
<tr *ngFor="let assignment of filteredAssignments">
<td>
<ul class="dependent-entities" *ngFor="let dependent of assignment.DependentEntities">
<li class="filterable">
<span class="assignment-roles">
<ng-container *ngIf="dependent.AssignmentRoles[0] == AssignmentRole.HRResponsible">
<span class="hr-responsible"
HR
</span>
<input data-val="true"
name="AssignmentRole[0]"
type="hidden"
value="HRResponsible">
</ng-container>
<ng-container *ngIf="dependent.AssignmentRoles[1] == AssignmentRole.SoFContact">
<span class="sof-contact">
SF
</span>
<input data-val="true"
name="AssignmentRole[0]"
type="hidden"
value="SoFContact">
</ng-container>
<ng-container *ngIf="dependent.AssignmentRoles[2] == AssignmentRole.GeneralContact">
<span class="general-contact">
G
</span>
<input data-val="true"
name="AssignmentRole[0]"
type="hidden"
value="GeneralContact">
</ng-container>
</span>
</li>
</ul>
</td>
</tr>
*Edit, I placed the spans in ng-containers and removed the ngFor. Here is an image of how it looks. The first row is correct, the second should not be empty, the third is correct and the fourth should not be empty... So every other one is empty..
I got it working by removing the index e.g *ngIf="dependent.AssignmentRoles == AssignmentRole.GeneralContact"
In angular material, autocomplete feature mat-option will have same entries on "value" field and text within.
<mat-form-field fxFlex="50">
<input type="text" placeholder="{{label.addUser.formLabels.role}}" matInput [matAutocomplete]="role" formControlName="roleId">
<mat-autocomplete #role="matAutocomplete" autoActiveFirstOption>
<mat-option *ngFor="let option of roleListFilter | async" value="{{option.roleId}}" >
<span>{{option.roleName}}</span>
</mat-option>
</mat-autocomplete>
</mat-form-field>
and I get the output as shown in the following question..
How can I get selected item value in Angular 2 Material Autocomplete
I want to display selected string in the text box and set roleId in value field at the same time.. Is this achievable?
Try below code:
<mat-form-field>
<input matInput placeholder="State" aria-label="State"
[matAutocomplete]="auto" [formControl]="your_ctrl">
<mat-autocomplete #auto="matAutocomplete">
<mat-option (click)="getSelectedElementId(item.id)" *ngFor="let item of your_list | async"
[value]="item.name">
<span>{{ item.name }}</span> |
</mat-option>
</mat-autocomplete>
</mat-form-field>
In .ts file:
getSelectedElementId(id){
console.log(id)
}