vuetify.js

Vuetify non scrolling navigation drawer

由 雨燕双飞 提交于 2019-12-10 12:17:21
问题 I have the next structure: In navigation drawer: - Tooolbar - Search block - Items list - Footer It looks so: The problem is, when i overflow items list, the scrolling is active for all navigation drawer instead of activate the items list scrolling. I'am trying to make items list scrollable and without fixing it height (filling remain space till footer). I have tried set height: 100vh for navigation drawer, but it didn't help. JsFiddle link here Vue.use(Vuetify); var vm = new Vue({ el: "#app"

build and publish dist folder to github pages

由 隐身守侯 提交于 2019-12-10 10:46:08
问题 I created a project with Vue.js and Vuetify using the Vue CLI. I would like to host this application with Github Pages. So I took a guide from here https://help.github.com/en/articles/configuring-a-publishing-source-for-github-pages#publishing-your-github-pages-site-from-a-docs-folder-on-your-master-branch and I am not using the history moute of the Vue Router (https://router.vuejs.org/guide/essentials/history-mode.html) to make sure I don't need a server. I created a build of my project and

Vuetify component v-form is not responding on the declared @submit event handler

由 十年热恋 提交于 2019-12-10 02:15:58
问题 I am using Vuetify and VueJS (the latest versions). Here is the small template of Login.vue : <template> <v-layout align-center justify-center> <v-flex xs12 sm8 md4> <v-card class="elevation-12"> <v-toolbar dark color="success"> <v-toolbar-title>Login form</v-toolbar-title> <v-spacer></v-spacer> </v-toolbar> <v-card-text> <v-form @submit.prevent="checkLogin"> <v-text-field prepend-icon="person" id="userLogin" v-model="userLogin" placeholder="my@login.com"></v-text-field> <v-text-field prepend

Vue/Vuetify - Unknown custom element: <v-app> - did you register the component correctly?

由 牧云@^-^@ 提交于 2019-12-10 01:52:20
问题 I am new to Vue and Vuetify. I just created quick app to check both of them. But I am a running into issues in beginning. The vue fails to identify vuetify components despite following all the steps outlined in document. The error is like below - vue.runtime.esm.js?ff9b:587 [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option. found in ---> at src\App.vue You can access the entire code at sandbox https

Scrollable Data Tables using Vuetify

由 痴心易碎 提交于 2019-12-09 15:37:40
问题 I want to create a vue page that has two data-tables that fill half the screen (vertically). Each data table should have a scroll bar if required. I have tried the markup below, but this does not size the data-tables to the screen size. Here is a codepen example <div id="app"> <v-app id="inspire"> <v-container fluid grid-list-md fill-height> <v-layout column> <v-flex md6> <v-data-table :headers="headers" :items="desserts" hide-actions class="elevation-1" > <template slot="items" slot-scope=

How can I custom datepicker in the vuetify?

由 霸气de小男生 提交于 2019-12-09 03:56:44
问题 I want to make datetimepicker like this : https://vuetifyjs.com/en/getting-started/consulting-and-support. If you click "2 Hour Consulting Session", it will display datetimepicker like this : https://ibb.co/kHrbHTG. I want to make like that. But I don't find the component datetimepicker in the documentation. The docs : https://vuetifyjs.com/en/components/date-pickers Based on my analysis, it uses datepicker modal. not the datepimepicker. The timepicker is only customized using the outline

How to change Vuetify calendar date format

由 浪尽此生 提交于 2019-12-08 19:58:53
问题 I am attempting to enable inputted events on the following Vuetify calendar: https://github.com/vuetifyjs/vuetify/blob/master/packages/docs/src/examples/calendars/complex/events.vue. I have set up my calendar to accept inputted data submitted in a form, including name, details, start, end, color. When I submit the form, an error occurs saying that the start and end properties are required on all events to be a valid timestamp in the format YYYY-MM-DD. I am using type="date" in the start and

Vue/vuetify v-switch: what is input-value?

由 Deadly 提交于 2019-12-08 18:37:59
问题 Can someone explain to me exactly what the input-value attribute does on the v-switch component? I think it has something to due with using the component with vuex, when you cannot use v-model directly. It seems to be working for me, but I don't understand it exactly. You can see the attribute here: https://vuetifyjs.com/en/components/selection-controls#api Where it is described as: "The v-model bound value". (I originally found the attribute in an example somehere.) 回答1: input-value behaves

Vuetify File Uploads

由 二次信任 提交于 2019-12-08 17:20:42
I'm trying to upload a file in Vue.js using vuetify and then save the uploaded file in my data object. HTML: <input id="file-upload" type="file" @change="onFileChange"> In my methods I call: onFileChange(e) { var files = e.target.files || e.dataTransfer.files; if (!files.length) { return; } this.editedPerson.id_file = e.target.files[0].name; }, This works 100%. I do, however, want to use the Vuetify component: <v-btn color="blue-grey" class="white--text" @click.native="openFileDialog">Upload<v-icon right dark>cloud_upload</v-icon></v-btn> I hide the original file input tag but on this v-btn

How to add vuetify to default vuepress theme

由 无人久伴 提交于 2019-12-08 10:50:27
问题 Is it possible to add vuetify to default vuepress theme ? I just need to add few components to default theme however it would be nice to use the vuetify for handling forms within my components. I have found a custom vuepress theme which uses a vuetify, however I would prefer to use default vuepress theme. Another option is to eject the default theme and add the vuetify to it. However I would prefer not to eject the default theme just add vuetify to it. 回答1: The easiest way would be to use the
订阅 vuetify.js