vuetify.js

问题 I'm new in vue.js, please help. I need filters in my table. Each column must have multiple select filter by values. When we click on column header - dropdown multi select opens, and we can select filtered values. For example like this Vuetify Data Table Inline Filter but this example doesn't work with vuetify 2. My html: <template> <v-card class="elevation-3"> <v-card-title> {{ other_title }} <v-btn style="background-color: white; box-shadow: none;" @click="csvExport(other_title,

问题 I want to send a 'template' prop to a component then render it. If I send a plain HTML it works, but if I send a Vuetify tag like <v-btn>test</v-btn> the template does not get compiled. I know i shouldn't pass a template via props, but this is a specific case: The parent component works as a "template builder" and the child components works as the "result viewer", so I have to pass the created template to the child so that it can compile and show it. Here's what I've been trying: main.js

问题 Below is my firestore collection structure My vue method to get data fetchResults(){ db.collection('data').onSnapshot((querySnapShot)=>{ let results = []; querySnapShot.forEach(doc=>{ results.push(doc.data()) }) this.record=results; }) } What I want is to query in the document like group by ID and order by sec_id desc . How do I suppose to query like that? So that I will get document grouped by ID field. 回答1: As a NoSQL type database, Cloud Firestore doesn't offer any aggregation queries such

问题 I have a datatable with hundreds of columns (and rows) and I want all of them to be edittable. The Vuetify example on https://vuetifyjs.com/en/components/data-tables (section:content editing ) shows the possibilty of making cells editable. However, doing this for hundreds of column manually is out of the question. Is there a way to make all cells editable by default? 回答1: AFAIK, there's no way to make all header fields editable by default, but you could customize the body template, and

问题 I'm trying to change the color of both the label and the text being inputted by the user on a v-text-field . I've tried applying the color prop to it, but it only changes de bottom divider's color. What should I do to get it as I want? This is my actual code: <v-text-field label="Search here!" color="blue lighten-1"> <template slot="append"> <v-btn class="blue--text text--lighten-1" flat> <v-icon>search</v-icon> </v-btn> </template> </v-text-field> NOTE: I've removed some props as the v-model

问题 I'm trying to follow this video using Vue and Vuetify to apply the current date with v-model to the date picker component v-date-picker using the data value date that's initially being set with new Date() . This is a simplified structure of my project: JS new Vue({ el:"#app", data: { date: new Date(), time: new Date() } }) Template <div id="app"> <v-date-picker v-model="date"></v-date-picker> {{ date }} <v-time-picker v-model="time"></v-time-picker> </div> And here's a CodePen . Unfortunately

问题 I'm trying to follow this video using Vue and Vuetify to apply the current date with v-model to the date picker component v-date-picker using the data value date that's initially being set with new Date() . This is a simplified structure of my project: JS new Vue({ el:"#app", data: { date: new Date(), time: new Date() } }) Template <div id="app"> <v-date-picker v-model="date"></v-date-picker> {{ date }} <v-time-picker v-model="time"></v-time-picker> </div> And here's a CodePen . Unfortunately

问题 The data tables from Vuetify have a hover effect by default. I found this CSS class applied when I check for the table row, .theme--light.v-data-table tbody tr:hover:not(.v-data-table__expanded__content) { background: #eee; } So it seems that this adds the background color to the table row. But when I add this scoped CSS to the Vuetify component, <template> <v-data-table :headers="headers" :items="items" :disable-sort="true" hide-default-footer :item-key="itemKey" > <template v-for="slot in

问题 I need a transition that does not produce the dreaded image blinking for a v-carousel-item. Ideally it's a smooth and quick fade that would work for both transition and reverse-transition. I have tried all the transitions built in to Vuetify as well as a couple of custom ones but nothing works. My issue can be seen CodePen of the issue and in a reported at GitHub Vuetify Issue. <div id="app"> <v-app> <v-carousel> <v-carousel-item v-for="(item,i) in items" :key="i" :src="item" reverse

问题 I need a transition that does not produce the dreaded image blinking for a v-carousel-item. Ideally it's a smooth and quick fade that would work for both transition and reverse-transition. I have tried all the transitions built in to Vuetify as well as a couple of custom ones but nothing works. My issue can be seen CodePen of the issue and in a reported at GitHub Vuetify Issue. <div id="app"> <v-app> <v-carousel> <v-carousel-item v-for="(item,i) in items" :key="i" :src="item" reverse