vuetify.js

Text field from Vuetify has no underline

由 心已入冬 提交于 2020-01-07 04:31:25
问题 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>

Switch Vuetify navigation drawer to mini and then temporary

由 喜你入骨 提交于 2020-01-06 15:06:48
问题 I have a project in Vue.js and I am using Vuetify. I have a toolbar and navigation drawer. What I would like is when on desktop the drawer is open. If the user clicks the side-icon the drawer switches to mini. If on md the drawer switches to mini. if the user clicks the side-icon the mini switches back to drawer If on sm or lower the navigation drawer switches to temporary I have most of the pieces but I am getting an error when I click the side-icon. Computed property 'mini' was assigned to

Select rows in Vuetify Data Table

由 自作多情 提交于 2020-01-06 08:06:40
问题 I was wondering how can I select/unselect a row by clicking a row in a datatable in Vuetify. It would be even better if I could select a range by using shift+click or shift+arrows but that is another question. I have tried to update the array I send into the parameter "value" but the rows never get selected in the ui. <template> <v-data-table :headers="headers" :items="desserts" item-key="id" class="elevation-1" :value="selectedRows" @click:row="rowClicked" ></v-data-table> </template>

Vuetify's data table + Vue Typed missing props value

由 一笑奈何 提交于 2020-01-06 06:37:30
问题 Pardon beginner's ignorance. Am trying to render Vuetify's data table with data being populated in a typescript file as seen below. Upon emulating what is provided in the sample doc here, I encounter the following error vue.runtime.esm.js?a427:475 [Vue warn]: Property or method "props" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. data.vue <template> <v-content> <v-data-table v-bind:headers="headers" :items=

Vuetify's data table + Vue Typed missing props value

由 放肆的年华 提交于 2020-01-06 06:36:07
问题 Pardon beginner's ignorance. Am trying to render Vuetify's data table with data being populated in a typescript file as seen below. Upon emulating what is provided in the sample doc here, I encounter the following error vue.runtime.esm.js?a427:475 [Vue warn]: Property or method "props" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. data.vue <template> <v-content> <v-data-table v-bind:headers="headers" :items=

How to load Vuetify when using the prerender-spa-plugin?

由 情到浓时终转凉″ 提交于 2020-01-06 06:18:08
问题 When we run our Vuetify application in development mode using npm run dev , it works properly. However, when we build it using the prerender-spa-plugin , the Vuetify CSS files load properly, but none of the JavaScript components work (i.e. clicking buttons to open the drawer doesn't work etc.). We've tried hardcoding a script tag to Vuetify's CDN but that hasn't worked. We've searched on GitHub for projects that use Vuetify and prerender-spa-plugin, but were not able to notice any difference

getting error when trying to upgrade to vuetify 2.0

由 自闭症网瘾萝莉.ら 提交于 2020-01-06 06:18:06
问题 Ok so I am trying for the second time to migrate thus far it has been a complete failure it seems that vuetify is not detected, unfortunately I cannot share my full repo since it is work related, but will describe steps and share relevant code. Project was created with vue-cli 3.3.0 with a vue.config.js file for environment variables. 1) npm uninstall vuetify 2)vue add vuetify 3)npm run serve my site does not load and I get this error (adding code): //vue.config.js module.exports = {

Vuetify/Vuejs radio group and checkbox group set to same v-model

由 荒凉一梦 提交于 2020-01-06 01:17:30
问题 I have something like this: https://jsfiddle.net/eywraw8t/372965/ new Vue({ el: '#app', data: { options: [] } }) <!DOCTYPE html> <html> <head> <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"> </head> <body> <div id="app"> <v-app> {{

Callback after dialog transition has finished

由 倖福魔咒の 提交于 2020-01-05 06:29:12
问题 Vuetify has some nice built-in transitions. But how can I call a method when the default dialog scale animation has finished? https://codepen.io/anon/pen/qKNNLw <v-dialog v-model="dialog" persistent max-width="200"> <v-btn slot="activator">Open</v-btn> <v-card> <v-card-text>Thank you!</v-card-text> <v-card-actions> <v-spacer></v-spacer> <v-btn flat @click.native="dialog = false">Close</v-btn> </v-card-actions> </v-card> </v-dialog> Vuejs describes some Javascript callbacks here: https://vuejs

Callback after dialog transition has finished

由 回眸只為那壹抹淺笑 提交于 2020-01-05 06:29:06
问题 Vuetify has some nice built-in transitions. But how can I call a method when the default dialog scale animation has finished? https://codepen.io/anon/pen/qKNNLw <v-dialog v-model="dialog" persistent max-width="200"> <v-btn slot="activator">Open</v-btn> <v-card> <v-card-text>Thank you!</v-card-text> <v-card-actions> <v-spacer></v-spacer> <v-btn flat @click.native="dialog = false">Close</v-btn> </v-card-actions> </v-card> </v-dialog> Vuejs describes some Javascript callbacks here: https://vuejs
订阅 vuetify.js