When using the Vuetify v-data-table element set to allow scrolling, is there a way or setting that would cause the results to scroll back to the top when clicking to the next page of results? By default when you click to show the next 10 records after having scrolled down you have to manually scroll back up to start looking at record 11, etc.
<v-data-table
:headers="headers"
fixed-header
:height="height"
:items="invoices"
item-key="id"
:search="search"
class="elevation-1"
:loading="loading"
loading-text="Loading...please wait..."
no-data-text="No invoices needing approval."
no-results-text="No invoices found for your search."
>
If you use vuetify 2.0 you can try something like but this event also triggers when you change count per page:
<v-data-table
ref="dataTable"
#update:page="$vuetify.goTo($refs.dataTable)"
...
The following prop worked fine for me:
#update:page="$vuetify.goTo(0)"
Related
I have a v-select dropdown (vuetify), which are a list of time-slots with 15 minutes interval
['00:00','00:15'...'23:55']
Let us call it startTime which is pre-defined to f.x '12.00' and is binded with v-model to data.
The issue here is, when i click on startTime the dropdown is not automatically scrolled to the selected value, i have to manually scroll down.
But WHEN i click a other value f.x 13.00 - and now when i click the startTime - it will automatically be scrolled to the selected value.
Here is a example of this behavior in code-pen
https://codepen.io/Hoxi/pen/QWBXwVB
Here is a example which shows that it works if i select a value, now the dropdown will be scrolled into the selected value.
So the issue is when the value is pre-selected, v-select wont be scrolling into the preselected value
Related issue:
https://github.com/sagalbot/vue-select/issues/1169
I think menu-props="auto" can help you
<v-combobox
v-model="select"
:items="items"
menu-props="auto"
label="Select"
persistent-hint
return-object
single-line>
</v-combobox>
<v-data-table
:headers="headers"
:items="medications"
#click:row="detail"
class="elevation-23"
>
This is how I have included #click:row in the v-data-table. With this when the row is clicked the detail function is called. But I have some columns in the row which is used to edit and delete option. When that is clicked I want some other functions to be called which I have defined.
But when I click that edit or delete options the details function is being called.
How can I stop #click:row to call detail function when the Actions column is clicked.
To prevent click event to propagate to parent row, you should use .stop modifier in child (action buttons):
<v-btn #click.stop="edit">Edit</v-btn>
I am creating form which has a dropdown feature that is currently pulling items (titled allDropdownTypes) from a table in my database. I've created this component using Vuetify, so it is in the following format:
<v-card>
<v-container>
<v-select
:items="allDropdownTypes.map(a => a.value)"
label="Project Type"
>
</v-select>
</v-container>
</v-card>
How can I create a way for users to add a new entry into the DB table through adding to the dropdown list?
Visually, alongside the options already given there is a + icon at the bottom of the dropdown list which will turn into a text box which the user can then submit and it will enter that option into the DB.
in my application i have a simple loop on tr element, to build a table:
<tr v-for="user in users"></tr>
Because i'm using an accordion, i will need two rows (the first row generated with v-for and another row that is the accordion):
<tr></tr> Generated with v-for
<tr></tr> Row for accordion
<tr></tr> Generated with v-for
<tr></tr> Row for accordion
So, v-for iterate the collection and for each row, i have another row (that is the accordion).
I would like build the "additional row" when the user click on the row generated via v-for.
So, how i can "attach" this row below the selected row ? I have think to use slot, but i'm a bit confused...
And, when the user click on another row... the previous attached row should be removed and the next one, will be attached on the selected.
In short, the same behavior of Bootstrap Accordion.
I need this because in this way i can load the accordion content "on demand".
Try wrapping them both around a <template> element as such :
<template v-for="user in users">
<tr></tr> Generated with v-for
<tr></tr> Row for accordion
</template>
The <template> element will not be rendered.
I have several similar tables inside a page, and, using scriptaculous, I would like to drag and drop one row from one table to another. I can already do this with the code:
new Draggable('some-id').
Where 'some-id' is the table row id.
However, there is no visible drag, which is bad for user interaction...
Applying the same code to a simple div works fine, which makes me believe that it is a problem with dragging a table row.
Edit:
For example:
<table>
<tr id="drag_tr"><td>Drag</td></tr>
</table>
<div id="drag_div">some content</div>
<script type="text/javascript">
new Draggable("drag_tr")
new Draggable("drag_div")
</script>
In this code, the div will have a visual drag (i.e. the div will follow the cursor), while the table row won't, even though I know it's being dragged.
So this is a problem with <div>s vs <tr>'s
a <div> can have an absolute position which allows the div to move wherever the mouse is but a tr lives within a table and thus cannot be moved about on the page
here is a jsfiddle to illustrate (tr is green, div is red)
http://jsfiddle.net/PUHPH/
no matter what coordinates you put in for the tr it will not move from the top left corner of the page - but the div will go where ever you put it