vuetify.js

问题 In vuetify I use a toolbar <v-toolbar dark color="primary"> <v-toolbar-side-icon @click.stop="drawer.drawer = !drawer.drawer"></v-toolbar-side-icon> <v-toolbar-title>{{drawer.title}}</v-toolbar-title> </v-toolbar> <router-view v-bind:page="pageData"></router-view> But I want to make it fixed, and not overlap with the vuerouter contents. How can I do that? I tried putting fixed but it still overlaps. Thanks 回答1: Since version 2.0.0 v-toolbar isn't fixable use v-app-bar https://vuetifyjs.com/en

问题 My front end use vuetify like this : validate: async function () { let tokenCaptcha await this.$recaptcha('login').then((token) => { tokenCaptcha = token }) if (this.$refs.form.validate() && tokenCaptcha) { let params = { birthDate: this.birthday, emailAddress: this.email, name: this.fullname, phoneNumber: this.phone, recaptcha: tokenCaptcha } this.modalSummary = true await this.setSummary(params) // Async vuex store / post to api backend if (this.dataSummary) { this.success = true } else {

问题 I need to open a v-dialog of certain width and height on right bottom side of my page, but, I can't understand how to do. V-dialog always are centered on the page, I searched on official doc, tried use CSS, but wasn't able any ideas? 回答1: This feature is being looked at but for now you can use edit the CSS class yourself. For instance, to get it to display in the bottom right use: .v-dialog { position: absolute; bottom: 0; right: 0; } 来源： https://stackoverflow.com/questions/53415502/custom

问题 We are using Vue.js and Vuetify for my application. As part of my application, I will make API call on page load based on that API response entire application will render all the components. As part of this API, I will get property named as cssDirection and it tells which css file suppose to load either it's LTR or RTL. When I worked in Angular, We used this approach. Now my question is there any workaround to achieve this in Vue instead of the above approach ? I googled I didn't find any

问题 I'm seeing lots of documentation for client-side validation with Vuetify, but finding it very difficult to find docs for server side validation messages for vuetify and vue. PROBLEM I have this component: <template> <v-container> <v-layout row> <v-flex xs12 sm6 offset-sm3> <v-card> <v-card-text> <v-container> <h3>Register Now</h3> <form v-on:submit.prevent="onSubmit"> <v-layout row> <v-flex xs12> <v-text-field name="email" label="Email" type="email" ref="user_email" id="email"> </v-text-field

问题 Is it possible to show the next step directly after clicking continue within the Vuetify Stepper? (or in other words: how to remove the transition slide out effect) 回答1: It doesn't look like there is any provided option to change the transition effect in the Vue component itself. But, you can disable it by setting the transition css property to none for the .stepper-content elements. For example, you could create a no-transition class: .no-transition .stepper__content { transition: none; }

问题 I have a form with a couple of filed and a tinymce editor. You can add and edit an item/row. When I try to edit a row and load the properties to their place all load just fine except the tinymce's Content. I want to parse the code inside the editor in a rendered form (source code=>normal form) but I cannot found a way to do so. I have tried v-model but it doesnt work with tinymce backwards. <v-flex> <tinymce id="d1" v-model="message.Content" :rules="empty"></tinymce> </v-flex> The message

问题 I have a form with a couple of filed and a tinymce editor. You can add and edit an item/row. When I try to edit a row and load the properties to their place all load just fine except the tinymce's Content. I want to parse the code inside the editor in a rendered form (source code=>normal form) but I cannot found a way to do so. I have tried v-model but it doesnt work with tinymce backwards. <v-flex> <tinymce id="d1" v-model="message.Content" :rules="empty"></tinymce> </v-flex> The message

问题 I put "vue add vuetify@1.5" in my Linux console error, vuetify is currently in version 2.0.2 if I put "vue add vuetify" by default the latest version is added I want an earlier version. 回答1: Go to your package.json and change line with "vuetify" to "vuetify": "1.5" . Then run npm install . Or yarn install , depending on what package manager you use. Alternatively do npm install vuetify@1.5 --save (https://docs.npmjs.com/cli/install) or yarn add vuetify@1.5 (https://yarnpkg.com/lang/en/docs

问题 I have 5 v-swtich components, called A, B, C, D and E. Here is what I want to achieve: If I switch on A , then D and E must automatically switch on, and the user must not be able to switch D and E off unless if he switches off A. If A is not switched on, the the user can switch on D or E . If the user switches on any combinations where D and E appear (for example: (C, D , E ), (C, D , E , B), (B, D , E ) ) then A must be automatically switched on, and the user must not switch off D and E