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>
Related
I have a multi-select dropdown for listing and selecting some items.
I am using the following code for the multi-select dropdown.
<Multiselect
v-model="abc"
valueProp="xyz"
label="userName"
mode="multiple"
placeholder="Select Recipients"
class="multiselect-blue"
:hideSelected="false"
:options="recipients"
>
</Multiselect>
the problem is when I select one option, the dropdown closes.
I want to close the drop-down only after selecting options as much I want.
is there any way to implement that
Don't know if this helps you out, but just use:
<multiple/> without the mode=
Than it's not a real dropdown it's a multi selection field..
set the on close select property to false like
:close-on-select="false",
<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.
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)"
I am configuruing my devextreme datagrid. I have to use both muliple selection and rowfocus together. I am able to limit selection on selection column checkbox only , so that I dont select a row if I click anywhere in the grid, It always have to be the selection checkbox. Now to include row focus it's creating a problem, when ever I am clicking selection checkbox it's focusing the row first, I have to click on it again to achieve row selection. So how do I prevent row focus event on selection checkbox column?
Refer below configuraion: -
<dx-data-grid :allow-column-reordering="true"
:allow-column-resizing="true"
:column-fixing="{enabled: true}"
:columns="config.columns"
:data-source="groupTypes"
:ref="ref"
:rowAlternationEnabled="true"
:show-borders="true"
#toolbar-preparing="onToolbarPreparing($event)"
key-expr="entityId"
:focused-row-enabled="true"
:focused-row-key.sync="focusedRowKey">
<dx-selection :select-all-mode="selectionMode"
mode="multiple"
show-check-boxes-mode="always"/>
</dx-data-grid>
I removed the :column-fixing="{enabled: true}" porperty from data grid, Now it's working