We Keep Coding

Filter by class in a Vue table, generated with v-for

I'm in Vue2 and I have a table, created by a v-for, with the rows that have a class of "included" or "allResults", based on a condition.
I need to show/hide only the table rows with a class of "included" when I trigger a switch (dataShow) that has a value of all or selected.
I've written a simple method for that but I would like to implement this function directly in the vue template, checking if every table row has a class of selected and hide it.
thanks in advance for help
<input v-model="dataShow" true-value="selected" false-value="all" type="checkbox" name="Show all or selected" />
<tbody>
<tr v-for="(comparable, index) in sortedSelectedComparables" :class="watchedProperty.map(el => el.idorg).includes(comparable.idorg) ? 'included' : 'allResults'">
<td>{{ Math.round(comparable.distance) + 'm'}}</td>
<td>{{ comparable.address }}</td>
<td>{{ comparable.startdate }}</td>
<td>{{ comparable.usedetail_en }}</td>
</tr>
</tbody>

How about using v-if or v-show to toggle the rows?
If dataShow is false, show all rows
or, if dataShow is true, show only the rows listed in watchedProperty
<tbody>
<tr v-for="(comparable, index) in sortedSelectedComparables" v-if="!dataShow || watchedProperty.map(el => el.idorg).includes(comparable.idorg)">
<td>{{ Math.round(comparable.distance) + 'm'}}</td>
<td>{{ comparable.address }}</td>
<td>{{ comparable.startdate }}</td>
<td>{{ comparable.usedetail_en }}</td>
</tr>
</tbody>
If you'd like to use class to toggle the visibility, you need to set css. Something like this...
<table :class="{'showAll': !dataShow}">
<tbody>
<tr v-for="(comparable, index) in sortedSelectedComparables" v-if="!dataShow || watchedProperty.map(el => el.idorg).includes(comparable.idorg)">
<td>{{ Math.round(comparable.distance) + 'm'}}</td>
<td>{{ comparable.address }}</td>
<td>{{ comparable.startdate }}</td>
<td>{{ comparable.usedetail_en }}</td>
</tr>
</tbody>
</table>
<style scoped lang="scss">
table.showAll td:not(.included) {
display: none;
}
</style>

How to populate list in list in a table Angular

I have a list of values [1, paracetamol,[{1, location, quantity}, {2, location2, quantity}]
so I have to print in two rows
1. [1, paracetamol, location, quantity]
2. [2. paracetamol, location1, quantity2]
I have maintained head
headElements = ['Drug ID', 'Drug Name', 'Location', 'Quantity']
<table class="table table-striped" >
<thead>
<tr>
<th *ngFor="let head of headElements" scope="col">{{ head }}</th>
</tr>
</thead>
<tbody>
<div *ngFor = "let drugDetail of drugList">
<tr *ngFor="let loc of drugDetail.drugLocationList">
<th scope="row">{{ drugDetail.drugId }}</th>
<td>{{ drugDetail.drugName }}</td>
<td>{{loc.location}}</td>
<td>{{ loc.quantity}}</td>
</tr>
</div>
</table>
output:
['Drug ID', 'Drug Name', 'Location', 'Quantity']
[1, paracetamol, location, quantity]
[2. paracetamol, location1, quantity2]

Maybe it could be easier if you do first a map to your array data, something like this:
copyDrugList = drugList.map(drugDetail => [
{ drugId : drugDetail.drugLocationList[0].drugId ,
drugName : drugDetail.drugName ,
location : drugDetail.drugLocationList[0].location ,
quantity : drugDetail.drugLocationList[0].quantity ,
},
{ drugId : drugDetail.drugLocationList[0].drugId ,
drugName : drugDetail.drugName ,
location : drugDetail.drugLocationList[1].location ,
quantity : drugDetail.drugLocationList[1].quantity ,
},
]);
Then, you only need to do a classic Angular HTML ngFor:
<tr *ngFor = "let drugDetail of copyDrugList ">
<td>{{ drugDetail.drugId }}</td>
<td>{{ drugDetail.drugName }}</td>
<td>{{ drugDetail.location }}</td>
<td>{{ drugDetail.quantity }}</td>
</tr>

How to generate row numbers (1, 2, 3, ...) when bind the custom table to array?

We have Vue.js project with custom table bound to array. It looks as following:
The key part of HTML code looks as following:
<InfiniteScroll ref="scroller" :disable="finished" #load="onLoad">
<swipeable-table
v-if="waitingList.length"
:headers="headers"
:items="waitingList"
:loading="loading"
custom-width
outerBorder
>
<template slot="rows" slot-scope="{ item: booking }">
<tr>
<td>{{ 0 }}</td>
<td></td>
<td></td>
<td>{{ fullName(booking.user) }}</td>
<td>{{ unitName(booking.search_by) }}</td>
...
</tr>
</template>
</swipeable-table>
...
</InfiniteScroll>
The waitingList is an array of objects.
The part of JavaScript code looks as following:
methods: {
fullName(user) {
return fullName.by(user, null, true)
},
unitName(unit) {
return unit?.name ?? ''
},
...
The table is scrollable that is it shows 30 items at the beginning and after you scroll next 30 items (30+30=60) and so on.
The array of objects looks as following:
Is there any way to use some JavaScript method to achieve it? If not how can I do it?

you can add index in the same way as item in template.
<template slot="rows" slot-scope="{ item: booking,index:index }">
<tr>
<td>{{ index }}</td>
<td></td>
<td></td>
<td>{{ fullName(booking.user) }}</td>
<td>{{ unitName(booking.search_by) }}</td>
...
</tr>
</template>

PrimeNG Table body doesn't display data

I am having trouble trying to fetch data to my overlay.Where did I go wrong ?
My goal is to fetch from an user array ,data (like cId,logged hours) and display it inside my table.
<button
[disabled]="false"
(click)="op1.show($event)"
pButton
type="button"
class="ui-button-primary"
label="View"
></button>
<p-overlayPanel #op1 [showCloseIcon]="true" [dismissable]="false">
<p-table [value]="day" [style]="{ width: '400px' }" [rows]="5">
<ng-template pTemplate="header">
<tr>
<td class="headerItem">{{ wbsElement }}</td>
<td class="headerItem">{{ saturday }}</td>
<td class="headerItem">{{ sunday }}</td>
...
<td class="headerItem">{{ total }}</td>
</tr>
</ng-template>
<ng-template pTemplate="body" let-day>
<tr>
<td>{{ user.cId }}</td>
<td *ngFor="let day of user.days">{{ day.hoursLogged }}</td>
<td>{{ totalHours }}</td>
</tr>
</ng-template>
</p-table>
</p-overlayPanel>
Above I've got my template that is supposed to create my overlay as shown here
wbsElement = Constants.WBS_ELEMENT;
saturday = Day.SATURDAY;
sunday = Day.SUNDAY;
monday = Day.MONDAY;
...
total = Constants.TOTAL;
user: User;
totalHours: number = 0;
constructor(private configService: ConfigService) {}
ngOnInit() {
this.configService.getUsers().subscribe(users => {
this.user = users[0];
});
this.getTotalHours();
}
private getTotalHours() {
this.user.days.forEach(day => (this.totalHours += day.hoursLogged));
}
This is what I have inside my ts file. user accepts dummy data from the first element of users array. Here's a preview of what it receives:
{
name: "test",
cId: "akaskdasda",
email: "test#test.com",
platformUser: "akakaksda",
days: [
{ weekday: Day.MONDAY, hoursLogged: 5 },
{ weekday: Day.TUESDAY, hoursLogged: 8 },
...
{ weekday: Day.SUNDAY, hoursLogged: 5 }
]
},
Currently ,there's no error is displayed inside console that would help me find out the reason of this behaviour and the output is not desired .
As you can see inside the imgur link , the elements go outside of the table (I dont understand this behaviour). I tried removing my double bindings from table body and printing out random data to see if that would work(I've also removed [value]="day" and let-day when I did this) ,however nothing was shown.Last thing I've tried was replacing ng-template with divs (because essentially that's what they are -as far as my understanding goes) but that didnt go well either.

It is correct that PrimeNg requires a [value] in order to create a static table.
However, you can pass in an empty array and do everything else statically as desired. So if inside the <p-table... you add [value]="[[]]", you can set up everything else statically inside the <tr>s and <td>s.
Figure I would post this here in case anyone else has a similar issue before giving up on the p-table altogether.

Managed to solve this by ditching p-table and using a normal table instead. Apparently , as I found here ,p-table expects an array because of [value]="user".

You have to assign user variable to the table value.
Try this.
<p-overlayPanel #op1 [showCloseIcon]="true" [dismissable]="false">
<p-table [value]="user" [style]="{ width: '400px' }" [rows]="5">
<ng-template pTemplate="header">
<tr>
<td class="headerItem">{{ wbsElement }}</td>
<td class="headerItem">{{ saturday }}</td>
<td class="headerItem">{{ sunday }}</td>
...
<td class="headerItem">{{ total }}</td>
</tr>
</ng-template>
<ng-template pTemplate="body" let-user>
<tr>
<td>{{ user.cId }}</td>
<td *ngFor="let day of user.days">{{ day.hoursLogged }}</td>
<td>{{ totalHours }}</td>
</tr>
</ng-template>
</p-table>
</p-overlayPanel>

Delete record in firebase with Javascript - Vuejs

I am able to show all data from my products record in Firebase DB, what i want now is to delete a certain record that i select.
I got a bit of the documentation of Firebase but i'm not so good with VueJs, although i think this is more of a JavaScript problem.
What i get on my console when i click the delete link is:
Error: Firebase.child failed: First argument was an invalid path:
"undefined". Paths must be non-empty strings and can't contain ".",
"#", "$", "[", or "]"
Here is my code:
<template>
<tbody v-for="(key, value, index) in products">
<tr v-for="k, val in key">
<td>{{ k.name }}</td>
<td>{{ k.description }}</td>
<td>{{ k.oldPrice }}</td>
<td>{{ k.price }}</td>
<td>{{ k.prodId }}</td>
<td>{{ k.sellerName }}</td>
<td><span class="glyphicon glyphicon-trash btn-delete-style" v-on:click="removeProduct(k)" title="Delete Product"></span></td>
</tr>
</tbody>
</template>
<script>
removeProduct: function (product) {
console.log("Product:" + product);
productsRef.child(product['.key']).remove();
toastr.success("Product deleted successfully");
}
</script>
Below you can see my DB:
Any help is appreciated, Thank you.

You need to reference first to that record and then call the remove function, here is an example:
<template>
<tbody v-for="(key, value, index) in products">
<tr v-for="k, val in key">
<td>{{ k.name }}</td>
<td>{{ k.description }}</td>
<td>{{ k.oldPrice }}</td>
<td>{{ k.price }}</td>
<td>{{ k.prodId }}</td>
<td>{{ k.sellerName }}</td>
<td><span class="glyphicon glyphicon-trash btn-delete-style" v-on:click="removeProduct(k, k.sellerId, k.prodId)" title="Delete Product"></span></td>
</tr>
</tbody>
</template>
<script>
removeProduct: function (product, sellerID, prodId) {
var currentRef = db.ref('products/' + sellerID + '/' + prodId);
currentRef.remove();
toastr.success("Product deleted successfully");
}
</script>

I think you should take product id from prodid
productsRef.child(product['prodid']).remove()