vuetify.js

问题 I am looking at the tutorials on vues page for adding tooltips. https://vuetifyjs.com/en/components/tooltips It seems to work fine for an individual button. However, it does not work within a v-item. I get a console message saying '[Vuetify] v-item is missing a default scopedSlot' <v-item v-for="foo in bars" :key=`${foo}`> <v-tooltip> <v-btn slot="activator"> <v-icon>some-icon</v-icon> </v-btn> <span>Some tooltip text</span> </v-tooltip> </v-item> I've tried adding things to the above code

问题 Case 1 We are trying to apply custom a style to a rendered vuetify element: <template> <v-text-field v-model="name" label="Name" /> </template> <style scoped> .input-group__input { background: red; } </style> But there are no changes. Case 2 We are trying to style elements rendered by v-html (e.g. external html). For example, we try to apply custom width and height on the img , but it doesn't work: <template> <div v-html="customHTML"></div> </template> <script> export default { data: () => ({

问题 I am trying to create a profile form which have two fields password and rePassword . basically, Both of them should be the same. I tried using different codes found on the web and different approaches. Some of them worked but. It did'nt actually fit in with the code. Here is the piece of code: Profile.vue: <v-layout> <v-flex xs12 sm6> <v-text-field v-model="password" :append-icon="show ? 'visibility' : 'visibility_off'" :rules="[rules.required, rules.min]" :type="show ? 'text' : 'password'"

问题 Currently I am using negative values for max and min and trying to hide the negative sign inside the thumb label. This is less than optimal. 回答1: Here is a pull request that addresses this problem https://github.com/vuetifyjs/vuetify/pull/6809 来源： https://stackoverflow.com/questions/55278597/i-need-a-v-slider-with-the-value-decreasing-from-left-to-right-how-can-i-achiev

问题 Im using Vuetify in my project. When I insert some data by v-select its working fine. Also when Im edit that data that also works. The only problem is I cant see the selected element when Im click on Edit. Here is my code <v-select prepend-icon="star_rate" :items="ratings" v-model="customer.rating" label="Rating" item-text="text" item-value="customer.rating" single-line ></v-select> Note: If I use {{customer.rating}} it gives an output like this { "id": 1, "text": "Bad" } and If I select a

问题 I have this code <div class="row form-group" v-for="(author, key) in authorData" :key="key"> <v-layout row wrap> <v-flex xs1 sm1 md1 text-xs-center> <div> <v-checkbox label :key="author.PmPubsAuthorID" v-model="authorData[key].checked" v-bind:id="author.PmPubsAuthorID.toString()" color="success" @change="authorCBClicked(authorData[key])" ></v-checkbox> </div> <!-- </v-card-text> </v-card>--> </v-flex> <v-flex xs10 sm10 md10> <v-card> <v-card-text class="px-0"> <b>Author:</b> <template v-if=

问题 I'm wondering if it's possible to run Vuetify (out-of-the-box) with Vert.x. I've played around a bit and I don't see a straightforward way but perhaps I'm missing something. Sources: https://vuetifyjs.com/en/getting-started/quick-start https://reactiverse.io/es4x/start/install Steps: Create an out-of-the-box Vuetify: npm install @vue/cli -g vue create my-app cd my-app vue add vuetify Test that it works by running it in Node npm run start When I view http://localhost:8080 (using node) it looks

问题 My vue component : <v-container> <v-row> <v-col cols="12" sm="6" md="3"> <vue-tel-input v-model="phone" v-on:country-changed="countryChanged"></vue-tel-input> </v-col> </v-row> </v-container> <v-btn color="success" @click="submit" > submit </v-btn> My codepen : https://codepen.io/positivethinking639/pen/XWWBXMW?editors=1011 I want display search like this : So make it easier for users to choose the country code How can I do it? 回答1: I think the simplest is to have two drop-downs side-by-side,

问题 I use Vuetify to generate input field with: <v-text-field label="Search" v-model="search" @keyup.enter="search()" required ></v-text-field> I want I can key up enter to search from this field: search () { alert('test') } When I key up on enter key, this method doesn't executed... 回答1: Make sure you use your developer console for debugging so you can see what error messages you are getting: Windows : ctrl + shift + I Mac : ⌘ + Option + I The problem you are actually having here is that you

问题 I am trying to focus the action buttons in a v-dialog every time it is opened. I tried using autofocus however it only works once. Normally in Vuetify you can set the focus on an element by adding a reference and then calling the focus() function like this: <v-text-field ref="refToElement" /> Code: this.$nextTick(() => this.$refs.refToElement.focus()) However for v-btn this doesn't seem to work. How can I use javascript to focus the v-btn every time the dialog is shown? 回答1: To set the focus