vuetify.js

问题 I have a Vuetify v-data-table on a v-card and I cannot get the layout right. So it's a configurable 2x2 layout (and it's supposed to use pagination, no scrolling). <template> <v-layout column> <v-layout row> <DashboardItem :item="itemTypes[0]" class="xs6" /> <DashboardItem :item="itemTypes[1]" class="xs6" /> </v-layout> <v-layout row> <DashboardItem :item="itemTypes[2]" class="xs6" /> <DashboardItem :item="itemTypes[3]" class="xs6" /> </v-layout> </v-layout> </template> The user can configure

问题 So I'm populating the data table with items fetched via API and it is working fine, but if I want to edit any of the fields it's not quite working out. The item only updates if I manually do something like search or sort. (inside the data table) The fields I'm trying to modify are item.tuning and item.url via getTab() <v-data-table class="tableElem" :headers="headers" :items="playlist" :loading="loadingPlaylist" :search="search" :pagination.sync="pagination" :rows-per-page-items="[15]" hide

问题 I'm building out a vuetify/nuxt frontend for the first time, and I've moved my v-navigation-drawer component out of the default.vue layout, and into it's own component, so that it can be reused in multiple layouts. The activator for this drawer still remains in the default.vue component, so I added a sidebar state to vuex: export const state = () => ({ baseurl: 'http://example.com/api/', sidebar: false, authenticated: false, token: null, user: null, }) The mutator for the sidebar looks like

问题 I'm using the Vuetify Autocomplete with remote data, and I would like to to throttle / debounce the API calls (wait 500 ms to call the API when the user is typing text in the autocomplete). How can I do that? I saw a Stack OverFlow post about the debounce-search attribute, but it didn't work for me, and I didn't see any Vuetify documentation on this attribute. 回答1: You could add debouncing to the function that makes the API calls. A debouncer could be implemented with setTimeout and

问题 I'm new to using Vue.js and Vuetify, I'm messing around with expansion panels, and in my case, I need to be able to destroy some ajax processing taking place when the user switches to another panel. While using bootstrap-vue I was able to handle this with the "show" event and set the value of a watched property (to the id of the panel selected), which each panel could check to see if matches their panel id, and if it didn't, it could cancel some things. (In my case I have some polling going

问题 I'm new to using Vue.js and Vuetify, I'm messing around with expansion panels, and in my case, I need to be able to destroy some ajax processing taking place when the user switches to another panel. While using bootstrap-vue I was able to handle this with the "show" event and set the value of a watched property (to the id of the panel selected), which each panel could check to see if matches their panel id, and if it didn't, it could cancel some things. (In my case I have some polling going

问题 v-file-input is a new component that appeared in Vuetify v2. <v-file-input multiple label="File input"></v-file-input> The default behavior shows a prepended icon: Is there a way to get rid of it ? 回答1: Try this: <v-file-input multiple label="File input" :prepend-icon="undefined"></v-file-input> or <v-file-input multiple label="File input" prepend-icon="fancyIconName"></v-file-input> 回答2: <v-file-input multiple label="File input" prepend-icon=""></v-file-input> You can disable (or change) it

问题 I would like to use the vuetify tab component simply as a navigation control, to <v-tabs dark fixed icons centered> <v-tabs-bar class="cyan"> <v-tabs-slider color="yellow"></v-tabs-slider> <v-tabs-item router :to="{name: 'election/admin', id: this.$route.params['id']}"> Overview </v-tabs-item> </v-tabs-bar> </v-tabs> However, it doesn't seem t obe working. I thought that the to property in addition with router should work to replace href? 回答1: EDIT 2018/11/15 Added new example: codepen <v

问题 I had install my project vuetify with this reference : https://vuetifyjs.com/en/ My project has been 100% complete. Now I want to implement SSR for Search Engine Optimization (SEO) I search on google and I find there exist 3 option to implement SSR to vuetify project https://ssr.vuejs.org/ https://github.com/vuetifyjs/webpack-ssr https://nuxtjs.org/ If I using option 2 or option 3, it seems I must to change my template. Maybe I should rewrite my code on the template. Because my template using

问题 I am trying to use vuetify's text field. It looks like this: After applying focus it looks like this: I have read this this, but my app IS wrapped in v-app. Is there anything else I could try? HINT: Dark theme doesn't work for me as well,but for example, I can use classes like "red", "text--red", to apply colors. Proof, that there is v-app involved below: EDIT: I tried to wrap it with v-content as well, but it didn't help. <v-app> <v-content> <router-view></router-view> </v-content> </v-app>