We Keep Coding

filter via a drop-down list in Angular

Here is a small illustration of my problem.
I have an HTML table with elements and a drop down list
enter image description here
If the user clicks on in, all records with type in are displayed
enter image description here
I don't know how to do it but while searching the internet I came across this page.
When I select in, my HTML table becomes empty, it doesn't fetch the record.
Do you know why?
service.ts
#Injectable({
providedIn: 'root'
})
export class CorporateActionService {
startDate = new Date("");
prea = [{
num: "758-1184511-34",
svm: "000902988",
type: "in",
quantity: "12,00",
isin: "BE0003470755",
title: "SOLVAY BE",
},
{
num: "758-1184511-34",
svm: "000902987",
type: "out",
quantity: "11,25",
isin: "BE0152676954",
title: "AXA B FD EQUITY BELGIUM",
},
]
dataList = [{
code: 1,
name: "in"
},
{
code: 2,
name: "out"
},
]
constructor() {}
}
component.ts
export class CorporateActionComponent implements OnInit {
prea: any;
dataList: any;
brandName = {};
constructor(private service: CorporateActionService) {}
ngOnInit(): void {
this.prea = this.service.prea;
this.dataList = this.service.dataList;
this.brandName = this.dataList.brandName;
}
public selectedBrand: any;
public valueSelected() {
this.prea = this.service.prea.filter(
item => item.num === this.selectedBrand
);
}
}
component.html
<div class="home-content container ">
<h1 class="text-center pt-5 pb-3">Corporate Action</h1>
<div class="row pt-3 container">
<div class="card" style="width: 100%;">
<div class="card-body">
<div class="text-end">
<select [(ngModel)]="selectedBrand" (change)="valueSelected()">
<option>Select</option>
<option *ngFor="let item of dataList;let i = index" value="{{item.code}}" [selected]="i == 0">
{{item.name}}
</option>
</select>
</div>
<table class="table table-striped table-hover">
<thead class="thead-light">
<tr class="text-center">
<th scope="col">Client</th>
<th scope="col">N° de préavis</th>
<th scope="col">Type</th>
<th scope="col">Quantité</th>
<th scope="col">ISIN</th>
<th scope="col">Titre</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let line of prea">
<td scope="row" class="text-center">{{ line.num }}</td>
<td scope="row" class="text-center">{{ line.svm }}</td>
<td scope="row" class="text-center">{{ line.type }}</td>
<td scope="row" class="text-center">{{ line.quantity }}</td>
<td scope="row" class="text-center">{{ line.isin }}</td>
<td scope="row" class="text-center">{{ line.title }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
Here is a reproduction.

Two things:
Change the value of the options to item.name since that's how you identify them
<option *ngFor="let item of dataList;let i = index" value="{{item.name}}" [selected]="i == 0">
And filter the array by type since that's where your in and out properties are.
public valueSelected() {
this.prea = this.service.prea.filter(
(item) => item.type === this.selectedBrand
);
}
https://stackblitz.com/edit/github-jvrg8t-npq79e?file=src/app/views/dashboard/views/administration/views/corporate-action/corporate-action.component.ts

How can I make Vue Sortable work on table?

I have an issue with this library. First of all, to test the library, I made a simple example work with ul and li tags. It was straightforward. Then, I needed to do a table, and when converting my example to a table it didn't work.
Table is showed but I cannot move any row.
I'm using the cdn way.
I think is something what I missing.
html
<div id='app-example-drag' >
<table class="table table-striped">
<thead class="thead-dark">
<tr>
<th scope="col">Id</th>
<th scope="col">Name</th>
<th scope="col">Sport</th>
</tr>
</thead>
<draggable v-model="list" tag="tbody">
<tr v-for="item in list" :key="item.name">
<td scope="row">{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.sport }}</td>
</tr>
</draggable>
</table>
</div>
js
Vue.component('draggable',vuedraggable);
applicationExample = new Vue({
el: '#app-example-drag',
display: "Table",
order: 8,
data() {
return {
list: [
{ id: 1, name: "Abby", sport: "basket" },
{ id: 2, name: "Brooke", sport: "foot" },
{ id: 3, name: "Courtenay", sport: "volley" },
{ id: 4, name: "David", sport: "rugby" }
]
};
}
});
https://jsfiddle.net/0Luhd694/3/
Thanks in advance

I just ran into this same problem. I think it has something to with recent version. Replace the draggable element with a tbody and make is='draggable'.
<div id='app-example-drag' >
<table class='table'>
<thead>
<tr><th scope='col'>description</th></tr>
</thead>
<tbody tag='tbody' v-model='lista1' is='draggable' group='items'>
<tr v-for='item in lista1' :key='item.id'>
<td scope='row'>{{item.description}}</td>
</tr>
</tbody>
</table>
</div>
https://jsfiddle.net/oqf64kdx/

How to make the data values ​in vue v-simple-table add up to average?

I have a v-simple-table.
The value of "TotalAverage" is the total average of "ggFinalgrade".
What can I do to get this value?
Current picture
The picture I want to present
The first value is 20
because (30+20+10)/3=20
The second value is 25
because (30+20)/2=25
My code
<template><div><v-card tile>
<v-card-title>{{ fixed.CardTitle }}</v-card-title>
<v-simple-table><thead><tr>
<th class="text-left" width="25%">{{ fixed.CourseSectionsName }}</th>
<th class="text-left" width="35%">{{ fixed.GradeItemsItemname }}</th>
<th class="text-center" width="10%">{{ fixed.QuizAttemptsTimefinish }}</th>
<th class="text-center" width="10%">{{ fixed.QuestionAttemptsResponsesummary }}</th>
<th class="text-center" width="10%">{{ fixed.GradeGradesFinalgrade }}</th>
<th class="text-center" width="10%">{{ fixed.TotalAverage }}</th>
</tr></thead><tbody>
<tr v-for="grade in grades" :key="grade.name">
<td class="text-left ">
{{ grade.csName }}</td>
<td class="text-lefe">
<div class="my-3" v-for="group in grade.group" :key="group.name">
<a :href="group.url" style="text-decoration:none">
{{ group.giItemname }}</a></div></td>
<td class="text-center">
<div class="my-3" v-for="qzaTimefinish in grade.qzaTimefinish" :key="qzaTimefinish.name">
{{ qzaTimefinish }}</div></td>
<td class="text-center">
<div class="my-3" v-for="qaResponsesummary in grade.qaResponsesummary" :key="qaResponsesummary.name">
{{ qaResponsesummary }}</div></td>
<td class="text-center">
<div class="my-3 text-center" v-for="group in grade.group" :key="group.name">
{{ group.ggFinalgrade }}</div></td>
<td class="text-center">{{ TotalAverage }}</td>
</tr></tbody>
</v-simple-table></v-card></div></template>
<script>
export default { data() { return {
fixed: {
CardTitle: "課程1",
CourseSectionsName: "內容",
GradeItemsItemname: "測驗卷",
QuizAttemptsTimefinish: "日期",
QuestionAttemptsResponsesummary: "教師",
GradeGradesFinalgrade: "結果",
TotalAverage: "總平均"
},
grades: [
{
csName: "內容1",
group: [{
giItemname: "測驗1-1",url: "",ggFinalgrade: 30},
{
giItemname: "測驗1-2",url: "",ggFinalgrade: 20},
{
giItemname: "測驗1-3",url: "",ggFinalgrade: 10}],
qzaTimefinish: ["0913", "0913", "1415"],
qaResponsesummary: ["教師1", "教師3", "教師4"]},
{
csName: "內容2",
group: [{
giItemname: "測驗2-1",url: "",ggFinalgrade: 30},
{
giItemname: "測驗2-2",url: "",ggFinalgrade: 20}],
qzaTimefinish: ["0913", "1415"],
qaResponsesummary: ["教師1", "教師2"]
}]};}};</script>

i. first add method,
ii. then calculate the average and return.
iii. finally print the totalAverage.
totalAverage(grades) {
var average = 0;
for(var i = 0; i < grades.length; i++){
average+= Number(grades[i].ggFinalgrade);
}
return average / grades.length;
},
replace {{TotalAverage }} with {{ totalAverage( grade.group) }}

Calculate sum of dynamically added values with vuejs

I am dynamically adding new row with selects and inputs in table if option is selected in first column of last row.
It looks like this https://jsfiddle.net/zgykgery/ so when you select 'Service' new row is added and total price of that row is calculated taking service price, default 10% discount and amount.
I am getting service price a bit clumsy with
:value="item.id+'|'+item.price"
so I have filter to take it from value.
But it works and now I don't know how I can loop through all rows and sum price of service without dicount, sum discount and then full price with servce price and discount.
I know I should use computed properties or watcher but don't know how.
How can I compute sum of those values in table and display them in smaller table below?
Update
I am new in vue and didn't use computed properties so this is what I tried but without success:
var Main = {
data() {
return {
rows_top: [{
service: '',
position: '',
visit: '',
amount: '',
discount: 10
}],
services: [{
id: 1,
name: 'Service1',
price: 100
},
{
id: 2,
name: 'Service2',
price: 200
},
{
id: 3,
name: 'Service3',
price: 300
},
],
total_discount: 0,
total_full_price: 0
}
},
methods: {
addRow(row, index) {
// console.log(row)
if (this.rows_top[this.rows_top.length - 1].service !== '') {
this.rows_top.push({
service: '',
position: '',
visit: '',
amount: '',
discount: 10
})
}
},
deleteRow(index) {
this.rows_top.splice(index, 1)
}
},
computed: {
total_price: () => {
if (this.rows_top) {
return this.rows_top.map((r) => {
return r.amount * this.$options.filters.after_line(r.service)
})
}
}
},
filters: {
after_line: (value) => {
if (!value) return ''
let after = value.split('|')
return after.pop()
}
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
#import url("//unpkg.com/element-ui#2.0.11/lib/theme-chalk/index.css");
table {
border-collapse: collapse
}
table,
th,
td {
border: 1px solid #ddd
}
th,
td {
padding: 5px
}
tr:nth-child(odd) {
background-color: #f9f9f9
}
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui#2.2.0/lib/index.js"></script>
<div id="app">
<template>
<table>
<thead>
<tr>
<th>Service</th>
<th>Position</th>
<th>Visit</th>
<th>Amount</th>
<th>Price</th>
<th>Discount %</th>
<th>Full price</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, index) in rows_top">
<td>
<el-select placeholder="Select" filterable="filterable" #change="addRow(row, index)" v-model="row.service">
<el-option v-for="item in services" :key="item.id" :label="item.name" :value="item.id+'|'+item.price"></el-option>
</el-select>
</td>
<td>
<el-select placeholder="Select" v-model="row.position" multiple="multiple" filterable="filterable" allow-create="allow-create" #change="checkNumber(result, index)"></el-select>
</td>
<td>
<el-select placeholder="Select" v-model="row.visit" allow-create="allow-create" filterable="filterable">
<el-option v-for="i in 10" :key="i" :label="i" :value="i"></el-option>
</el-select>
</td>
<td>
<el-select placeholder="Select" v-model="row.amount" allow-create="allow-create" filterable="filterable">
<el-option v-for="i in 30" :key="i" :label="i" :value="i"></el-option>
</el-select>
</td>
<td>{{ row.service | after_line }}</td>
<td>
<el-input v-model="row.discount"></el-input>
</td>
<td><span v-if="row.service && row.amount">{{ ($options.filters.after_line(row.service) * row.amount - (($options.filters.after_line(row.service) * row.amount) / 100) * row.discount).toFixed(2) }}</span><span v-else-if="row.service">{{ ($options.filters.after_line(row.service) - ($options.filters.after_line(row.service) / 100) * row.discount).toFixed(2) }}</span>
<el-button v-if="row.service" icon="el-icon-delete" size="mini" #click="deleteRow(index)" class="push-right"></el-button>
</td>
</tr>
</tbody>
</table><br/>
<table>
<tr>
<td>Total price</td>
<td>{{ total_price }}</td>
</tr>
<tr>
<td>Total discount</td>
<td>{{ total_discount }}</td>
</tr>
<tr>
<td>Total full price</td>
<td>{{ total_full_price }}</td>
</tr>
</table>
</template>
</div>
Here is also updated fiddle and total price is still empty on change https://jsfiddle.net/zgykgery/21/

As #Roy J said, just use a computed function to get you the values of your calculation, knowing that it will automatically change when the data from item changes
EDIT: a simple method is more designed in the case when you use a v-for loop
methods: {
priceID (item) {
return item.id + '|' + item.price
}
}
And you would use it simply like that in your Vue
<tr v-for="(row, index) in rows_top">
<td>
<el-select placeholder="Select" filterable="filterable" #change="addRow(row, index)" v-model="row.service">
<el-option v-for="item in services" :key="item.id" :label="item.name" :value="priceID(item)"></el-option>
</el-select>
</td>
...

How to print correct number of rows in a table with Vue

I"m just starting to learn Vue and I'm having a little issue printing out the correct number of rows I should be getting for a table.
My table has 2 columns and 4 expected rows. When I test my code I get a table with 2 columns and one row with 4 column values using v-repeat or I get a table with 2 columns and 4 rows with the same information and 4 column values over 4 rows.
Basically trying to make a table that looks like this
Col 1 | Col2
row1 rData | rData
row2 rData | rData
row3 rData | rData
row4 rData | rData
The html
<table>
<thead id="tblHead">
<th v-for="item in items">
{{ item.message }}
</th>
</tr>
</thead>
<tbody id="tblInside">
<!-- <tr v-for="stuff in stuffs">
{{ stuff.message }}-->
<tr v-repeat="stuffsTD">
<td v-for="tdStuff in stuffsTD">
{{ tdStuff.message }}
</td>
</tr>
</tbody>
</table>
The Vue.js
var tbl = new Vue({
el: '#tblHead',
data: {
items: [
{ message: 'One' },
{ message: 'Two'}
]
}
})
var inTbl = new Vue({
el: '#tblInside',
data: {
stuffsTD: [
{ message: 'Row1 Col1 Plz' },
{ message: 'Row1 Col2 Plz' },
{ message: 'Row2 Col1 Plz' },
{ message: 'Row2 Col2 Plz' }
]
}
})

try this html:
<table>
<thead id="tblHead">
<th v-for="item in items">
{{ item.message }}
</th>
</tr>
</thead>
<tbody id="tblInside">
<tr>
<td v-for="tdStuff in stuffsTD">
{{ tdStuff.message }}
</td>
</tr>
</tbody>
</table>

Figured it out on my own. Have to use v-for on the tr element
<table id="tblData">
<thead>
<tr>
<th v-for="column in columns">
{{ column | uppercase }}
</th>
</tr>
</thead>
<tbody>
<tr v-for="tableData in tableData">
<td>
{{ tableData.client }}
</td>
<td>
{{ tableData.ad }}
</td>
<td>
{{ tableData.rt }}
</td>
</tr>
</tbody>
</table>
and
var tbl = new Vue({
el: '#tblData',
data: {
columns: [ 'some', 'thing', 'here' ],
tableData: [
{
some: 'A STORE',
thing: 'Summer',
here: '1:32'
},
{
some: 'Computer Store',
thing: 'fix',
here: '2:14'
},
{
some: 'Store 2',
thing: 'MTG',
here: '0:47'
}
]
}
})