I create one data table with option select-all, in each row in my table I add one event in checkbox
<v-checkbox
primary
hide-details
v-model="props.selected"
#change="selecionarPedido"
></v-checkbox>
So It`s possible to put a event in seletAll checkbox (that checkbox in the header? or an envent in v-checkbox that fire when the select-all change the value?
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.
How do I identify the cell selected in a Quasar table?
My goal is that once I identify the cell selected, if the user clicks on a custom button, I pass the selected cell information to a pop up page.
Note I'm not using the row selection checkboxes.
we want to be able to select multiple cells from a given column in a quasar table. I believe that this will take a custom selection capability.
You can archive the selection using the data index. Please refer the following codepen for multiple row selection.
https://codepen.io/anon/pen/PrNBpV
And for cell selection refer this.
https://codepen.io/anon/pen/gNrdyL?editors=1010
try this
<q-td key="desc" :props="props" v-for="col in props.cols" :key="col.name" #click.native="selectRow(props.row.__index,col.name)" :class="selected.hasOwnProperty(props.row.__index) && selected[props.row.__index].indexOf(col.name)!=-1?'bg-grey-2':''">
{{ props.row[col.field] }}
</q-td>
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.