When I am clicking on View Button every button is getting spinned. Here is the code which I used to view payload. Though I am getting correct data after clicking button, button I want to know reasons why every button is getting loaded though I have clicked on only one View.
Here are the screenshots
Before Click
After Click
<v-data-table
:headers="headers"
:items="tasks"
class="elevation-1"
:loading="loading"
hide-actions
>
<template v-slot:items="props">
<td>{{ props.item.reason }}</td>
<td>{{ props.item.requestedBy.adminName }}</td>
<td>{{ new Date(props.item.createdAt).toLocaleString("en") }}</td>
<td class="layout px-0">
<v-btn
small
:loading="downloadingPayload"
#click="getPayload(props.item._id)"
>
View
</v-btn>
</td>
</template>
</v-data-table>
It is because you have the same data for all the elements.
:loading="downloadingPayload"
i guess you have something like this in your method
getPayload (item) { this.downloadingPayload = true }
need to have a downloadingPayload for each item and do something like
getPayload (item) {
item.downloadingPayload = true
}
and in the template
:loading="props.item.downloadingPayload"
Related
I am doing a project with VueJS and I need to the following:
Use an API & fetch a list of users in the home page.
When clicking on a user's button, I need to redirect to another component & output that user's details in that component (only the details of the user that I clicked).
Here is the table displaying the users info
<v-data-table hide-actions flat :headers="headers" :items="doctors">
<template v-slot:items="props">
<td>{{ props.index + 1 }}</td>
<td>{{ props.item.profile.full_name }}</td>
<td>{{ props.item.email }}</td>
<td>{{ props.item.username }}</td>
<td>{{ props.item.updated_at }}</td>
<td>
<v-btn outline small color="indigo" #click="view(props.item)">
<i class="fa fa-eye"></i> make payment
</v-btn>
</td>
</template>
<template v-slot:no-results>
<h6 class="grey--text">No data available</h6>
</template>
</v-data-table>
the view function is in the methods
view() {
window.open(`/finance/pay-doctors/${item.id}`, "_blank");
},
I have created a dynamic route
{ path: '/finance/pay-doctors/:id', component: DoctorDetails}
Am unable to create the DoctorDetails and show data
I recommend that you try with a router push initially.
Hence please use
<script>
export default {
methods: {
view(id) {
this.$router.push({ path: `/finance/pay-doctors/${item.id}` })
}
}
}
</script>
Make sure that your router is properly set + that you have the proper state thanks to your Vue devtools.
Also, be sure to have something to fetch the user's data on DoctorDetails.
I have a Vuetify data table with expandable rows. Each row correlates with a customer's order which consists of samples they want to be tested.
Currently, I'm retrieving all the orders with all the samples but it takes too long to load all the information.
So instead of retrieving all the samples for every order, when I expand a row I want to be able to perform an API call to retrieve the samples that should be displayed in the expanded section for that particular order.
I've researched all I can and have come to a dead-end. Here's where I'm at currently:
<v-data-table
:headers="orders_headers"
:items="orders"
show-expand
:single-expand="true"
:expanded.sync="expanded"
>
<!-- Expand Buttons -->
<template v-slot:item.data-table-expand="{ item, isExpanded, expand }">
<v-btn #click="expand(true)" v-if="!isExpanded">Expand</v-btn>
<v-btn #click="expand(false)" v-if="isExpanded">close</v-btn>
</template>
<!-- Expanded Data -->
<template v-slot:expanded-item="{ headers, item }">
<td :colspan="headers.length">
<table v-for="(sample, index) in item.samples" :key="index">
<tr>
<th>Sample Acc</th>
<td>{{ sample.sample_accession }}</td>
</tr>
<tr>
<th>Sample Status</th>
<td>{{ sample.sample_status }}</td>
</tr>
</table>
</td>
</template>
</v-data-table>
I think I may have figured it while writing this
As I was typing this out, I realized what I possibly need to do. I need to add a method call to the expand button, then in that method set the results to expandedSamples and replace item.samples with it.
In the meantime, if anyone has any better solution I'd love to hear. Otherwise, I'll post my solution in case anyone else is trying to attempt something similar to this.
Bonus
Anyone know if there's a way to tap into the expand event without replacing the default icons/functionality or a way to include the original icons/functionality when using v-slot:item.data-table-expand?
Currently when I'm using v-slot:item.data-table-expand, I have to add the buttons back in and I lose the chevrons and the animations.
For the benefit of future readers facing the same issue, use the #item-expanded event of the data-table to lazy load the item details (or child data) on demand. Hook the item-expanded event to a method (e.g. loadDetails) that loads the data, and then merges the response into the original items array.
Here's an example...
<v-data-table
:headers="headers"
:items="items"
show-expand
single-expand
item-key="name"
:search="search"
#item-expanded="loadDetails"
>
<template v-slot:expanded-item="{ headers, item }">
<td :colspan="headers.length">
<table v-for="(sample, index) in items.samples" :key="index">
<tr>
<th>Sample Acc</th>
<td>{{ sample.sample_accession }}</td>
</tr>
</table>
</td>
</template>
</v-data-table>
methods: {
loadDetails({item}) {
axios.get('http.../' + item.id)
.then(response => {
item.samples = response.data[0]
})
}
}
https://codeply.com/p/d5XibmqjUh
Here's the basic solution to my issue.
<v-data-table
:headers="orders_headers"
:items="orders"
show-expand
:single-expand="true"
:expanded.sync="expanded"
>
<!-- Expand Buttons -->
<template v-slot:item.data-table-expand="{ item, isExpanded, expand }">
<v-btn #click="expand(true); getSamples(item.id)" v-if="!isExpanded">Expand</v-btn>
<v-btn #click="expand(false)" v-if="isExpanded">close</v-btn>
</template>
<!-- Expanded Data -->
<template v-slot:expanded-item="{ headers, item }">
<td :colspan="headers.length">
<table v-for="(sample, index) in expandedOrderDetails" :key="index">
<tr>
<th>Sample Acc</th>
<td>{{ sample.sample_accession }}</td>
</tr>
<tr>
<th>Sample Status</th>
<td>{{ sample.sample_status }}</td>
</tr>
</table>
</td>
</template>
</v-data-table>
<script>
methods: {
getSamples(orderId) {
// Perform API call
this.expandedOrderDetails = response.data;
},
}
</script>
After many hours of development, our project leader has decided he wants each row to correlate to each sample instead of orders though. So expanding is no longer necessary.
Good Morning,
I am trying to do and edit feature in a Quasar table.
It works as expected, but when I have more than one entry in the table it defaults to the last entry.
The value of the row is added to the component using props, my problem is getting the current row.
So my question is how do it get the correct row when clicking the button?
Code Download
You can get row data using props.row.
Example -
<q-table
title="Treats"
:data="data"
:columns="columns"
row-key="name"
>
<template v-slot:body-cell-name="props">
<q-td :props="props">
<div>
<q-badge color="purple" :label="props.value"></q-badge>
<q-btn icon="edit" dense flat size="sm" #click="EditData(props.row)"></q-btn>
</div>
</q-td>
</template>
</q-table>
methods:{
EditData(row){
alert("hi")
console.log(row);
console.log(this.data.indexOf(row))
}
}
Now you have a row and indexof particular row. You can use splice or replace the element on particular index.
Codepen - https://codepen.io/Pratik__007/pen/LYVjqXb
Check the console.
**you can use index to get the row number
<tr v-for="(strockorder,index) in strockorders" :key="index">
<td class="text-left">{{ strockorder.strockNo}}</td>
<td class="text-center">{{ strockorder.item}}</td>
<td class="text-center">{{ strockorder.orderDate}} </td>
<td class="text-center">{{strockorder.deliveryDate }}</td>
**
So I have a Vuetify data table with a lot of items, I need to display 50/100/150 items.
The problem, when I have 50 items it takes about 2 to 3 seconds to load the entire table. My request takes about 500ms to load and vue takes 3 seconds to render. When I have 150 items it takes about 10 seconds.
Is it possible to reduce render time to at least 5 seconds with 150 items?
I'm using this table: https://vuetifyjs.com/en/components/data-tables#data-tables
My table code:
<template>
<v-data-table
:headers="headers"
:items="desserts"
:items-per-page="5"
class="elevation-1"
:items-per-page="50"
:footer-props="rowsPerPageItems"
>
<TableRow :row="item" v-for="item in clientList" :key="item.id">
</v-data-table>
</template>
// my clientList is async response from server
import { mapGetters } from "vuex";
export default {
data(){
return {
rowsPerPageItems: [50, 100, 150]
}
},
computed: {
...mapGetters["clientList"] // this comes from vuex, I don't think it's relevant. It returns about 400 client info
}
}
<!-- My component TableRow -->
<template>
<tr>
<td>
<v-checkbox v-model="row.checked" color="primary"></v-checkbox>
</td>
<td>{{ row.data }}</td>
<td>{{ row.name }}</td>
<td>
<!-- This is a jQuery plugin, I need it to keep track of every key pressed -->
<Select2
:id="row.id.toString()"
:settings="{ minimumInputLength: 3, ajax: ajaxData, placeholder: labels.descriptionList[row.description] }"
#select="handleSelect2($event)"
/>
</td>
<td v-if="this.is_expense">
<v-select
:items="labels.categoryName"
:placeholder="labels.categoryList[row.category]"
#input="updateCashflow"
v-model="row.category"
dense
></v-select>
</td>
<td v-else></td>
<td>{{ row.amount }}</td>
</tr>
</template>
Remove that component and read v-data-table documentation.
You shouldn't add v-checkbox to make it rows selectable, use show-select prop instead with v-model on v-data-table
Use item.<name> slot to add custom components into cells
In my case, I really need components inside my table so I used
<v-select v-if="mountedComponent" :items="myList"/>
<span v-else>Some default value</span>
When page mounted I set mounted to true
export default {
name: "Test",
data(){
return {
mountedComponent: false,
myList:["item 1", "item 2"]
}
},
mounted(){
this.mountedComponent= true;
}
}
This solved my performance issue, going from 10 ~ 15 seconds delay to 100ms.
I have a problem with making vuetify datatable work with dragula. I'm using the wrapper vue2-dragula.
Here is a fiddle that demonstrate the problem though i wasn't able to make dragular work per se
https://jsfiddle.net/Lscqm9je/
On my computer it's working as intended. The only problem is the datatable column alingment if you look on the first table, we loose the header / data alignment because i added a div in between template and tr
<v-data-table v-bind:headers="headers" v-bind:items="items" hide-actions>
<template slot="items" scope="props">
<tbody v-dragula="tr" drake="first" class="container">
<tr>
<td class="text-xs-right">{{ props.item.round }}</td>
<td class="text-xs-right">{{ props.item.cat }}</td>
<td class="text-xs-right">{{ props.item.p1 }}</td>
<td class="text-xs-right">{{ props.item.p2 }}</td>
<td class="text-xs-right">{{ props.item.statut }}</td>
</tr>
</tbody>
</template>
</v-data-table>
So i guess putting something in between table template and table row is a no-no. But it's the only way i found to make dragula directive work. The directive must be direct parent of the draggable element ( tr ). I also tried to put the directive within the template tag but it's doesn't seem to be possible.
<template slot="items" scope="props" v-dragula="tr" drake="first" class="container">
what i'm looking for is a table that look like the 2nd in the fiddle but with the dragula directive working. Someone have an idea ?
I'm a beginner with no real programming degree so it might be something stupid, sorry in advance if it is :)
thank.
More information :
this doesn't work :
<template slot="items" scope="props" v-dragula="tr" drake="first" class="container">
<tr>
<td class="text-xs-right">{{ props.item.round }}</td>
This work but the cell are dragged individually instead of the whole line.
<template slot="items" scope="props">
<tr v-dragula="tr" drake="first" class="container">
<td class="text-xs-right">{{ props.item.round }}</td>
The console on the fiddle is giving a warning
[Vue warn]: Property or method "tr" is not defined on the instance but referenced during render.
Make sure to declare reactive data properties in the data option.
(found in <Root>)
Looking at the vue-dragula readme page, v-dragula="..." should point to the data collection, not the element, so I assume it will be
<template slot="items" scope="props" v-dragula="items" drake="first" class="container">
This might get you a little further. At one point the second table was showing an icon upon dragging, but it's not doing so now, I'm not sure why. If I get any further clues, I'll update.
BTW, <template> instead of <div> is preferred, as <table> is touchy about internal tags (although might expect Vuetify to manage that issue).