I use Vuetify for development a dashboard. I need all cards whit a specific height, in this case 450px. I fill the v-data-table from axios petition, when the v-data-table fill whit data, it break the height of v-card.
See the v-card Tabla Tarificador carteras
this is my v-card component code:
<v-row>
<v-col cols="12" md="7">
<v-card height="450">
<v-card-text>
<v-row>
<v-col cols="12">
<v-data-table
:fixed-header="true"
:headers="tablas.tarificadorCarteras.cabeceras"
:items="tablas.tarificadorCarteras.datos"
>
<template v-slot:[`item.cartera`]="{ item }">
<a #click="obtenerGraficoTarificadorCartera(item.cartera)" class="text-capitalize">{{ item.cartera }}</a>
</template>
<template v-slot:[`item.minutos_entel`]="{ item }">
{{ new Intl.NumberFormat('es-CL').format(item.minutos_entel) }}
</template>
<template v-slot:[`item.minutos_movistar`]="{ item }">
{{ new Intl.NumberFormat('es-CL').format(item.minutos_movistar) }}
</template>
<template v-slot:[`item.minutos_pacifico`]="{ item }">
{{ new Intl.NumberFormat('es-CL').format(item.minutos_pacifico) }}
</template>
</v-data-table>
</v-col>
</v-row>
</v-card-text>
</v-card>
</v-col>
</v-row>
I need see the v-data-table inside the v-card scrollable and responsive. I try to make it, but can't
Set max-height="450" style="overflow-y:auto" to v-col
Related
I normally would do this
<v-row v-for="(rule, index) in ruleDetails" :key="index">
... I should have access to index then...
... but now ...
I am not inside a v-for I am inside a table.
How can I access index variable of a table ?
<v-data-table
:headers="headers"
:items="rules"
:single-expand="singleExpand"
:expanded.sync="expanded"
item-key="name"
show-expand
class="elevation-0"
>
<template v-slot:top>
<v-toolbar flat>
<v-toolbar-title>{{ name }}</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn outlined class="green--text" #click="showAddRuleModal()">
<v-icon dark> add </v-icon>
Rule
</v-btn>
</v-toolbar>
</template>
<template v-slot:expanded-item="{ headers, item }">
<td :colspan="headers.length">{{ item.conditions }}</td>
</template>
<template v-slot:item.id="{ item }">
<v-btn outlined class="orange--text" #click="showEditRuleModal(index)"> Edit </v-btn>
<v-btn outlined class="red--text" #click="showDeleteRuleModal(index)"> Delete </v-btn>
</template>
</v-data-table>
You could get it using the item slot as the second argument:
<template v-slot:item="{ expand, index, item }">
<v-btn outlined class="orange--text" #click="showEditRuleModal(index)"> Edit </v-btn>
<v-btn outlined class="red--text" #click="showDeleteRuleModal(index)"> Delete </v-btn>
</template>
based on the documentation you have access to index if you use item slot: item-slot documentation
but if you don't want to use item slot, you can use a computed to include the index in the objects that you are passing to the v-data-table and that computed is like this:
computed: {
dataTableItems() {
return this.rules.map((x, i) => ({index: i, ...x}));
}
}
then in each slot where you have access to item you can find the index by using item.index
I have a text-field that's triggering a color-picker. This is inside a v-for loop as well. All is fine until the activator triggers the color-picker and multiple pickers are triggered with a mashup of the v-for data.
You can see the mashup of data at the top, as well as mutliple color pickers activated.
Any idea why? My code is below:
<v-tab-item>
<v-card
flat
v-for="(colorMenu, index) in colorMenus"
:key="index"
>
<v-card-text>
<v-row
justify="start"
align="center">
<v-col
cols="4"
>
<p class="font-weight-bold text-subtitle-2 mt-4">{{ colorMenu.title }}</p>
</v-col>
<v-col
cols="8"
>
<v-text-field
v-model="myModels[colorMenu.type]"
v-mask="mask"
hide-details
class=""
solo
>
<template
v-slot:append
>
<v-menu
v-model="menu"
top
nudge-bottom="105"
nudge-left="16"
:close-on-content-click="false"
>
<template
v-slot:activator="{ on }"
>
<div
:style="{ backgroundColor: selectColors[index], borderRadius: menu ? '50%' : '4px'}"
v-on="on"
class="color_select"
/>
</template>
<v-color-picker
v-model="selectColors[index]"
flat
>
</v-color-picker>
</v-menu>
</template>
</v-text-field>
</v-col>
</v-row>
<v-divider class="mt-3"></v-divider>
</v-card-text>
</v-card>
</v-tab-item>
The main problem is all the v-menu's are bound to the single menu Boolean, causing all the menus to open and close at the same time. To resolve this, make menu an array of Booleans (like you've done with the other props within the v-for).
Another issue is your backgroundColor is bound to selectColors[index], but that's an object from the v-color-picker. The object has a hex property that contains the hex string of the color, which would be appropriate for the backgroundColor value.
<v-menu 👇
v-model="menu[index]"
top
nudge-bottom="105"
nudge-left="16"
:close-on-content-click="false"
>
<template v-slot:activator="{ on }"> 👇 👇
<div :style="{ backgroundColor: selectColors[index]?.hex, borderRadius: menu[index] ? '50%' : '4px'}"
v-on="on"
class="color_select"
/>
</template>
<v-color-picker v-model="selectColors[index]" flat>
</v-color-picker>
</v-menu>
export default {
data() {
return { 👇
menus: [],
â‹®
}
}
}
demo
I've been trying to change v-select text colour for the label and items but can't find the prop to do that, I can change the background-color but not the label or text items inside the v-select. Sample code below
<div id="app">
<v-app id="inspire">
<v-container fluid>
<v-row align="center">
<v-col
class="d-flex"
cols="12"
sm="6"
>
<v-select
:items="items"
label="Standard"
background-color="#000000"
color="#ffffff"
></v-select>
</v-col>
</v-row>
</v-container>
</v-app>
</div>
You could use item slot to customize the label rendering :
<v-select :items="items" label="Standard" background-color="#000000" color="#ffffff">
<template #item="{item}">
<span style="color:white; background:blue">{{item.name}}<span>
</template>
</v-select>
I am having issues aligning things correctly inside my Vue app using Vuetify.
<v-card class="mx-auto">
<v-row>
<v-col
v-for="(item, i) in items"
:key="i"
align-end
justify-end
>
<v-btn class="btn">
<v-icon>{{ item.icon }}</v-icon>
<span class="ml-2">{{ item.text }}</span>
</v-btn>
</v-col>
</v-row>
...
I simply want to align it to the right.
The properties you've put on <v-col> don't exist (i.e. align-end and justify-end). They are properties on the <v-row> component (which is a flex container). You need to use classes instead.
Make sure to consult the API->props section on the Vuetify component page when choosing component properties.
Try
<v-col class="d-flex justify-end">
<v-btn>Button</v-btn>
</v-col>
Note that the alignment is dependent upon the width of v-col. If v-col is only as wide as the button, you'll need to set the width by using the cols="x" property.
Add direction: rtl to your v-btn, Here is codepen:
<template>
<v-btn class="btn rtl">
...
</v-btn>
</template>
<style>
.rtl { direction: rtl; }
</style>
I have a parent component with 2 buttons that I want to use as filters. the child component is called inside a v-data-table.
ScanGrid(parent):
<template>
<v-card class="ma-5" v-else>
<v-flex row xs12 class="pa-3 ml-3">
<div class="mr-3 mt-2">
<h3>Regrouper par :</h3>
</div>
<div>
<v-btn-toggle color="success" v-model="groupBy">
<v-btn
text
value="barCode"
class="lowerCase"
v-ripple="{ class: 'success--text' }"
>
Code barre
</v-btn>
<v-btn
text
value="productDef"
class="lowerCase"
v-ripple="{ class: 'success--text' }"
>
Définition de produit
</v-btn>
</v-btn-toggle>
</div>
</v-flex>
<v-card-text>
<v-layout align-center>
<v-data-table
:headers="headers"
:items="items"
item-key="StorageName"
show-expand
single-expand
:expanded="expanded"
hide-default-footer
#click:row="clickedRow"
>
<template v-slot:expanded-item="{ item }">
<td :colspan="12">
<ScanGridCode :item="item"></ScanGridCode>
</td>
</template>
<template v-slot:expanded-item="{ item }">
<td :colspan="12">
<ScanGridDef :item="item"></ScanGridDef>
</td>
</template>
</v-data-table>
</v-layout>
</v-card-text>
</v-card>
</template>
The children components I want to switch using the buttons are called ScanGridCode and ScanGridDef inside templates in v-data-table. I tried to find examples of filtering buttons online but couldn't find anything like what I want to do.
I'm using Vue 2.6.10 with Vuetify 2.1.7
You're almost done already, since you already have the v-btn-toggle set up with v-model="groupBy". All you still need is to add v-if to each template, like:
<template v-if="groupBy=='barCode'" v-slot:expanded-item="{ item }">