vuetify.js

问题 I have a Vue.js project (Nuxt.js) and as UI I use the Vuetify. For e2e testing I use the Cypress. Below is my scenarios of test in Cypress: I have a problem while creating test for page where I use v-autocomplete component. The problem is that I can't use Vuetify native classes to get the element I want to test. below is an example with data-cy selector <v-autocomplete v-model="model" :items="items" item-text="Description" item-value="API" label="Public APIs" placeholder="Start typing to

问题 Recent versions of Vue Router allow for links that open in a new tab, e.g. the following <router-link :to="{ name: 'fooRoute'}" target="_blank"> Link Text </router-link> correctly renders an <a target="_blank"> . However, the same doesn't seem to work with a Vuetify v-btn , which supports router paths, for example if we want to use an icon. <v-btn icon :to="{ name: 'fooRoute'}" target="_blank"> <v-icon>window</v-icon> Link Text </v-btn> Despite the component rendering an <a> , there is no

问题 The code shows the tooltip icon but does not show anything when I hover on it.How do I enable it on hover like in the case of number below. https://vuetifyjs.com/en/components/tooltips <v-text-field label="Name" id="name" disabled> <v-tooltip slot="append" :value="true" bottom> <v-icon slot="activator" color="primary" dark>live_help</v-icon> <span>Name of the user</span> </v-tooltip> </v-text-field> <v-text-field label="number" id="number"> <v-tooltip slot="append" bottom> <v-icon slot=

问题 I have a page with Vuetify DataTable component (Vuetify 1.5.7) and using default component's pagination. I set the 'Rows per page' select values using the :rows-per-page-items property. Now I want to set initial value from this rows-per-page-items array ( not only the first one! ) when entering the page. Is it possible and how can I do this? Example code of table is shown below: <v-data-table :headers="headers" :items="equipment" class="elevation-1" :rows-per-page-items='[15, 30, 50, 100]'>

问题 I have the following code for a menu and menu button. I am using Vue CLI 3 and Vuetify <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons"> ... <v-navigation-drawer fixed app v-model="drawer"> <MyMenu/> </v-navigation-drawer> <v-toolbar fixed app> <v-toolbar-title class="headline text-uppercase"> <v-toolbar-side-icon @click.stop="drawer = !drawer"/> </v

问题 Normally to style an icon in Vuetify we'll do something like <v-icon large color="primary">comment</v-icon> How do we get the same effect while using the prepend-icon prop like here <v-list-group prepend-icon="comment"> The documentation says prepend-icon uses same syntax as v-icon but no concrete example is provided for my use case 回答1: Target it properly and apply style. For example in v-list-group : .v-list__group__header__prepend-icon .v-icon { color: red; } But note for example v-text

问题 This follows on from my previous question : How to get states from a Vuex store from within a Vuetify list, VueJs I understand how to get states from the store, but I am struggling commiting mutations from within a list. Here is my list : export default{ name: 'menuList', data() { return { show: true, items: [{ title: 'Do something', icon: 'web', event: function () { this.$store.commit('UI/DoSomething', { argument1: "argument1", rootStore: this.$store }) } } ] } } } I have to have the event

问题 I'm trying to rollup a Vue component which uses some vuetify components. For MWE purpose I have a very simple component, CountButton.vue , which is just a wrapper over <v-btn> <template> <div class=""> <v-btn @click="count"> test {{amount}} </v-btn> </div> </template> <script> import {VBtn} from 'vuetify/lib' // <---- for tree shaking & a la carte export default { components: { VBtn }, data: () =>({ amount: 0 }), methods:{ count() { this.amount += 1 } } } </script> I then used rollup to

问题 Does anyone have a simple tutorial to bundle and use Modernizr in a VueJs Webpack project? I use the default Webpack project of VueJS with monofile components. I want it all bundled. For precision i want to use inputtypes.date in a majority of forms and avoid display vuetify date picker when on mobile browser with date picker support. 回答1: I have not used modernizr, but based on my experience using webpack, i think you can use existing modernizr loaders, i.e webpack-modernizr-loader As its

问题 I have a Vuetify v-data-table on a v-card and I cannot get the layout right. So it's a configurable 2x2 layout (and it's supposed to use pagination, no scrolling). <template> <v-layout column> <v-layout row> <DashboardItem :item="itemTypes[0]" class="xs6" /> <DashboardItem :item="itemTypes[1]" class="xs6" /> </v-layout> <v-layout row> <DashboardItem :item="itemTypes[2]" class="xs6" /> <DashboardItem :item="itemTypes[3]" class="xs6" /> </v-layout> </v-layout> </template> The user can configure