vuetify.js

问题 I'm currently working on a Laravel/Vue image carousel and the images are rendering fine but when I load the videos using the v-playback component, I get the following error: Module parse failed: Unexpected character ' ' (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. I've tried looking for a webpack.config.js but what I got is a webpack.mix.js which only has these: const mix = require('laravel-mix'); mix.js(

问题 I'm trying to conditionally apply the class "xs10" to a v-flex which contains my menu, based on the dimensions of the current screen. I've so far got something like this: <v-flex v-bind:class="{ xs10: menuSmall}" fluid> ..data() { return { menuSmall: this.$vuetify.breakpoint.mdAndUp } } But it's not working. I'm new to Vue.js + Vuetify but I'm guessing it's because menuSmall is not being re-calculated and re-rendered on every screen resize. Do I need to put it into the 'mounted' life-cycle of

问题 I'm using Vuetify 1.0.14 to create my application. While I load a page though, I received this error message: vuetify.js?dc48:19429 [Vuetify] v-model has been deprecated found in ---> <VExpansionPanelContent> Those are the lines of code this warning message refers to: <v-expansion-panel> <v-expansion-panel-content key="annotations" :value="sideFocusItem.default === 'annotations'"> <div slot="header">Annotations:</div> <annotations v-if="loadAnnotationBuilder"></annotations> </v-expansion

问题 As doc said i used this to change default theme of my project: Vue.use(Vuetify, { theme: { primary: '#ff0000', secondary: '#ff0000', accent: '#ff0000', error: '#ff0000' } }) But nothing happens. Default primary color(#1976D2) is still there with no change. Why it is not working? 回答1: Editing theme with Vue.use is not supported in older versions of Vuetify. Upgrading Vuetify to 0.17.0 or higher will solve your problem. 来源： https://stackoverflow.com/questions/48618078/vuetify-theme-doesnt

问题 I am trying to change the font-size of text through a dropdown and for the most part it is working like i wanted. Although, is there a better way to do it like using a computed or watcher? Not sure how i would execute that? this is a working pen: https://codepen.io/anon/pen/xoMXPB?editors=1011 How can i change logic on line 6 to replace it with a computed or watcher? <div id="app"> <v-app id="inspire"> <v-container> <v-select :items="items" label="Font-Size" v-model="myFont"> </v-select> <div

问题 This question already has an answer here : <v-card> - did you register the component correctly? (1 answer) Closed last year . I am using vuetifyjs/nuxt starter template. It launches correctly, however when I try to add a <Bagde /> UI componenent to the default.vue inside the <v-toolbar /> component, I am getting this error: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option. In fact, this happens whenever I want

问题 I'm interested in using a vuetify expansion panel component in a nuxt project. I'm looking at https://vuetifyjs.com/en/components/expansion-panels#examples . The exampleas all show the same text and header for each subpanel based on code that looks like: <v-app id="inspire"> <div> <div class="text-xs-center mb-3">{{ panel }}</div> <v-expansion-panel v-model="panel" expand > <v-expansion-panel-content v-for="(item, i) in 5" :key="i" > <div slot="header">Item</div> <v-card> <v-card-text class=

问题 I have a vuetify switch that should receive value from the API True or False. The API returns True, but the Switch always shows False. <v-switch label="Habilitado">{{props.item.habilitado}}</v-switch> The switch is inside an a vuetify data table with others values. The other values receive data, but seems the switch not. My items in data() return: items:[{ habilitado: "", }], In Postman shows True the value My axios Get Method: cargarTanques(){ axios .get("http://localhost:58209/api/Tanque

问题 My code like this : <div id="app"> <v-app> <v-content> <v-container> <v-dialog v-for='foo, k in foos' :key='foo.id' :close-on-content-click="false" transition="scale-transition" :return-value.sync="foo.date" min-width="290px" v-model="modal[k]" :ref="'dialog' + k" > <template v-slot:activator="{ on }"> <v-btn color="success" dark v-on="on">call date {{foo.id}} {{ foo.date }}</v-btn> </template> <v-row justify="center"> <v-date-picker v-model="foo.date" @input="changeHours"> <div class="flex

问题 So I have several checkboxes and two of them should function like radiobuttons meaning that if I click on one, the other one should become disabled and vice versa (I know I can do it using radiobuttons but I need to use checkboxes ). What's the best way to do it? Here is my code for those two checkboxes : <v-checkbox label="Check1" value="Check1" v-model="Check1" ></v-checkbox> <v-checkbox label="Check2" value="Check2" v-model="Check2" ></v-checkbox> 回答1: Try to handle the @change event which