vuetify.js

问题 How to use v-tooltip inside v-menu activator with vuetify 2.0? Previously it was working using slot="activator" . That's what I'm trying to combine: <v-menu> <template v-slot:activator="{on}"> <v-btn v-on="on">Menu Trigger</v-btn> </template> ...list with menu options... </v-menu> and <v-tooltip v-slot:activator="{on}"> <v-btn v-on="on">Menu Trigger with Tooltip</v-btn> <span>Tooltip Content</span> </v-tooltip> Now I try to paste v-tooltip inside v-menu, what should happen with {on} here? 回答1

问题 I want to override vuetify variables with custom colors by following this I've created a stylus folder which contains base folder ( _colors , _typography ) and main.styl file. The _color file is imported into main.styl file, which the latter is imported into main.js Here is my file structure: enter image description here And the imports are included in main.js : import '../node_modules/vuetify/dist/vuetify.min.css' import './assets/stylus/main.styl' Inside the _color.styl , I have this test

问题 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

问题 I'm using vuetify 1.1.8 and vue 3.0.0-rc.3. I am trying to use some of the custom SVG icons in my project, which I have designed, instead of default icons from Material Icons or FontAwesome Icons which are supported by vuetify I have tried using vue-svg-loader to load my custom svg icons, and use them as components. Something like this <template> <icon-one></icon-one> </template> <script> import iconOne from './public/iconOne.svg' export default{ components:{ iconOne } } </script> But the

问题 Environment: vue@^2.6.10: vuetify@^2.1.0 I want to use v-data-table to show search results and add evaluate button in each row in the v-data-table . Unfortunately I have two issues: Evaluate buttons are not shown I don't know how to get row data of pushed button What do I need to change? Template <v-data-table :headers="headers" :items="search_result" > <template slot="items" slot-scope="row"> <td>{{row.item.no}}</td> <td>{{row.item.result}}</td> <td> <v-btn class="mx-2" fab dark small color=

问题 I have Vuetify installed in my Laravel project but none of the v- classes are working. There are no errors in the console though. Here is the app.js file: require('./bootstrap'); window.Vue = require('vue'); import Vuetify from 'vuetify' Vue.use(Vuetify); Vue.component('container-component', require('./components/ContainerComponent.vue').default); Vue.component('index-component', require('./components/IndexComponent.vue').default); const vuetify = new Vuetify(); const app = new Vue({ el: '

问题 I have 3 cards when mouse hover on card title it shows a arrow_down icon & i can click on it , it a drop down menu with Delete function when i hover over the v-card-title it shows the icon but after i click on it, mouse on drop-down menu the arrow_down icon disappeared, how to properly implement it ? https://codepen.io/sharon-the-encoder/pen/WLWyoG?editors=0010 const cards = [ { title: "Gooey PBJ Brownies", author: "John Walibur", image: "https://placeimg.com/640/480/nature" }, { title:

问题 I have a v-select widget (combobox / select) in a Vue application. When I open it and hover over an option, the background-color of the option is highlighted (currently light-grey). I want the background-color to have a different color when the mouse arrow hovers over an option. I can not see a property of the v-select widget that supports this. Is there a way to achieve this? v-select::hover { background-color: "#00857A"; } <v-select append-icon="../assets/img/sy-arrow-chevron-down.svg"

问题 I have a v-list-item-group for having a stateful list items. The thing is I want to disable altering the currently selected item once any is selected. To achieve that, I tried adding a watch on the selected item and reverting the v-model of the old value of it. However, it ends up in an infinite loop (you know, I assign new value inside its own watcher). <template> <v-list> <v-list-item-group v-model="model" :mandatory="!!model"> <v-list-item v-for="(item, i) in items" :key="`item-${i}`"

问题 I want to override the vuetify style by class. For example to change the background color of button from vuetify. So, I create a button with class on it: <div id="app"> <v-btn class="some" color="success">Success</v-btn> </div> .some { background-color:red; } But the background-color red is override by vuetify. How to solve this issue without using important and themes? Here is example: https://stackblitz.com/edit/vue-js-gpkj6k 回答1: Having worked with Vuetify and it's various styling...