I have a question for you guys, I have a table that contains student time information and dates, for the quarter. I would like to add a time picker so the instructors can select to show just the information between this date and that day.
Basically, I want to use the Entry time field to filter and show just data from x date to x date.
Here is my code
<v-card>
<v-card-title>
Student Profile
<v-spacer></v-spacer>
</v-card-title>
<v-data-table :headers="headers2"
:pagination.sync="pagination2"
:items="profile"
:search="search">
<template slot="items" slot-scope="props">
<td>{{ props.item.sid }}</td>
<td class="text-xs-left">{{ props.item.firstName }}</td>
<td class="text-xs-left">{{ props.item.lastName }}</td>
<td class="text-xs-left">{{ props.item.course }}</td>
<td class="text-xs-left">{{ props.item.entryTime }}</td>
<td class="text-xs-left">{{ props.item.exitTime }}</td>
<td class="text-xs-left">{{ props.item.duration }}</td>
</template>
<v-alert slot="no-results" :value="true" color="error" icon="warning">
Your search for "{{ searchQuery }}" found no results.
</v-alert>
</v-data-table>
</v-card>
Method
methods: {
editStudent(sid) {
this.dialog = true;
this.editedSid = sid;
axios.get('/api/e', {
params: {
'sid': this.editedSid
}
}).then(response => {
this.profile = response.data
}).catch(e => {
console.log(e)
})
}
}
Any suggestions?
What you'll want to do is add a "computed property" that filters the original data, and use it instead.
something like
computed: {
filteredEntries(){
return this.profile.filter(entry => {
//check if the entry is between the selected dated
});
}
}
Then use 'this.filteredEntries' instead of 'this.profile' when initializing the table.
Related
I have a select dropdown where I get data from an API, later I add the value of the item selected on a table. All works good but when I click in addItem() I add the id value of the item of the select, but I want to show the name_value instead of the id on the table. At the same time, I need to get the id value of the select item.
Select code (VUEJS):
<select
id="select1"
ref="seleccionado"
v-model="id_equipo"
required
>
<option
v-for="equipo in equipos"
:key="equipo.id_equipo"
:value="equipo.id_equipo"
>
{{ equipo.nombre_equipo }}
</option>
</select>
button addItem:
<v-btn
color="blue darken-1"
#click="addItem()"
>
Aregar Equipo
</v-btn>
table:
<tbody>
<tr
v-for="item in rowData"
:key="item.id_torneo"
>
<td>{{ item.id_torneo }}</td>
<td>{{ item.id_equipo }}</td>
</tr>
</tbody>
function addItem:
addItem () {
var equipos_torneo = {
id_torneo: this.id_torneo,
id_equipo: this.id_equipo,
}
this.rowData.push(equipos_torneo)
},
Try this way instead:
<template>
<div>
<!-- Your select code -->
<select id="select1" ref="seleccionado" v-model="id_equipo" required>
<option
v-for="equipo in equipos"
:key="equipo.id_equipo"
:value="equipo.id_equipo"
>
{{ equipo.nombre_equipo }}
</option>
</select>
<!-- Your button code -->
<v-btn
color="blue darken-1"
#click="addItem()"
>
Aregar Equipo
</v-btn>
<!-- Your table code -->
<tbody>
<tr
v-for="item in rowData"
:key="item.id_torneo"
>
<td>{{ item.id_torneo }}</td>
<td>{{ item.id_equipo }}</td>
</tr>
</tbody>
</div>
</template>
<script>
export default {
methods: {
addItem () {
// Search the object in the equipos array with the selected id from the select
let equipos_torneo = this.equipos.find(v.id_equipo === this.id_equipo);
// If object gets found successfully, push to the rowData array
if(equipos_torneo) this.rowData.push(equipos_torneo);
},
},
}
</script>
I have a data-table in Vue.js component using Vuetify with a input inside a row, and I need to disable a button if the input v-model="row.item.quantidade" was empty. but doesn't work.
HTML
<v-data-table :headers="headersAllStep3" :items="step2" :search="searchAllStep3">
<template v-slot:item="row">
<tr>
<td>{{ row.item.produto }}</td>
<td>{{ row.item.descricao }}</td>
<td>{{ row.item.ncm }}</td>
<td><input type="number" v-model="row.item.quantidade" autofocus></td>
</tr>
</template>
</v-data-table>
<v-btn :disabled="isDisableQuantidade()">
Continue
</v-btn>
Javascript method in vue.js component
isDisableQuantidade(){
return this.step2.quantidade.length == false;
},
The function :
isDisableQuantidade(){
return this.step2.some(step=>step.quantidade==0);
},
should be a computed property and it must be used without () like :
<v-btn :disabled="isDisableQuantidade">
Continue
</v-btn>
Just new to use Vue.js and I have a question:
I have a array to build a table. If I double click the table row, the program will call a javascript function to get the selected item by its index.
<div id="vm-table">
<table>
<tr v-for="(item, index) in items" ondblclick="getItem('{{ index }}')">
<td>{{ index }}</td>
<td>{{ item.pk }}</td>
<td>{{ item.description }}</td>
</tr>
</table>
</div>
<script>
var vm = new Vue({
el: "#vm-table",
data: {
items: []
}
});
</script>
I assume the array "items" already contains a list of items. In the above "tr" line it seems cannot get the "index" value and the value must be used in the inner "td" elements. If I need to get the parameter of index how can I do?
Thanks,
Try this instead :
<tr v-for="(item, index) in items" #dblclick="getItem(index)">
<td>{{ index }}</td>
<td>{{ item.pk }}</td>
<td>{{ item.description }}</td>
</tr>
I'm using vue js with vuetify and laravel. I have a component with a dynamic datatable which gets data from database using axios. Also there's v-checkboxes in that datatable. So everything is working as i expect. But now I want to call to two functions onchange event in v-checkbox. For example when user click the checkbox (checked) I want to call to a save function and when user uncheck the checkbox I want to call to a delete function. I tried to do it with the id of the v-checkbox and check if that checkbox is checked then call to save function else call to delete function. And then when user checked the checkbox save function get called but when user uncheck the checkbox both functions get called. That's where I'm stuck at. How can I archieve this?
datatable
<v-data-table :headers="customer_headers" :items="customers" :search="customer_search" item-key="CustomerCode" ref="customer_table">
<template slot="items" slot-scope="props">
<tr :id="'customer_tr_'+props.item.CustomerCode">
<td class="text-md-center">{{ props.item.CustomerCode }}</td>
<td class="text-md-center">{{ props.item.CustomerName }}</td>
<td class="text-md-center">{{ props.item.NO_OF_DISPENSERS }}</td>
<td class="text-md-center">{{ props.item.next_service_date }}</td>
<td class="text-md-center">{{ props.item.STATUS }}</td>
<td class="text-md-center">{{ props.item.Workerstatus }}</td>
<td class="text-md-center">
<v-checkbox
:key="props.item.CustomerCode"
:ref="'customer_checkbox_ref' + props.item.CustomerCode"
:id="'customer_checkbox_'+props.item.CustomerCode"
#change="loadCustomerDispensers(props.item.CustomerCode,props.item.STATUS);changeServicePlanData()"
></v-checkbox>
</td>
</tr>
</template>
</v-data-table>
I 'm trying this in changeServicePlanData() functionchangeServicePlanData()
function changeServicePlanData(id) {
if ($('#' + id).checked == true) {
this.savePlan()
} else {
this.deletePlan()
}
}
I would say you don't need jQuery for this. There are several approaches to achieving this on v-checkbox, one being the use of Checkboxes selected values as Array.
Consider the following example:
new Vue({
el: '#app',
data() {
return {
items: [{
label: 'Item #1',
value: 1
},
{
label: 'Item #2',
value: 2
},
{
label: 'Item #3',
value: 3
}
],
selected: [2] // Preselects Item #2
}
},
methods: {
check(val) {
let action = '';
if (this.selected.includes(val)) {
action = 'Saving';
}
else {
action = 'Deleting';
}
alert(`${action} plan #${val}`);
}
}
});
.v-input {
margin-top: 0 !important;
}
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
<div id="app">
<v-app>
<v-container fluid>
<v-checkbox v-model="selected"
v-for="item in items"
:key="item.value"
:label="item.label"
:value="item.value"
#change="check(item.value)"></v-checkbox>
</v-container>
</v-app>
</div>
So, in your case, I would do something like so:
<v-data-table
:headers="customer_headers"
:items="customers"
:search="customer_search"
item-key="CustomerCode"
ref="customer_table">
<template slot="items" slot-scope="{ item }">
<tr>
<!-- the other TDs here -->
<td class="text-md-center">
<v-checkbox
v-model="selectedCustomerCodes"
v-bind:value="item.CustomerCode"
label="Service plan data"
#change="loadCustomerDispensers(item.CustomerCode, item.STATUS)">
</v-checkbox>
</td>
</tr>
</template>
</v-data-table>
data() {
return {
selectedCustomerCodes: []
}
},
methods: {
loadCustomerDispensers(customerCode, status) {
// Your business logic
this.changeServicePlanData(customerCode);
},
changeServicePlanData(code) {
if (this.selectedCustomerCodes.includes(code)) {
this.savePlan();
}
else {
this.deletePlan();
}
},
savePlan() {
// ...
},
deletePlan() {
// ...
}
}
I'm trying to display the object name of a the suppliers array but i'm confused because its inside an array. I'm display the array and also i want to display the object name of the second array. But the problem is on the second array. The supplier.name is i want to display it. The pic is below
[PICTURE IS HERE][1]
ts
getAllMaterials() {
this.subscription = this.materialsService.getAll()
.subscribe(
(data:any) => {
this.materials = data.materials;
let suppliers = data.materials[0].suppliers;
console.log(data);
console.log(suppliers);
},
error => {
alert("Error");
console.log(error);
});
}
html
<tr *ngFor="let material of materials">
<td>{{ material.sku }}</td>
<td>{{ material.name }}</td>
<td>display on this td</td>
<td>{{ material.price }}</td>
<td>
</tr>
So you can do two things :
Solution 1 : If you have only single record in suppliers
<tr *ngFor="let material of materials">
<td>{{ material.sku }}</td>
<td>{{ material.name }}</td>
<td>{{material.suppliers[0].name}}</td>
<td>{{ material.price }}</td>
<td>
</tr>
Solution 2 :
If you want to show multiple names in same td :
<tr *ngFor="let material of materials">
<td>{{ material.sku }}</td>
<td>{{ material.name }}</td>
<td><span *ngFor ="let s of material.suppliers"> {{s.name}}
</span>
</td>
<td>{{ material.price }}</td>
<td>
</tr>