vuetify.js | 易学教程

Vuetify v-select onchange event returns previously selected value instead of current

阅读更多关于 Vuetify v-select onchange event returns previously selected value instead of current

问题 I have a <v-select> dropdown that I'm wanting to use as a list of URLs to navigate to other pages. The issue I'm running into is the onchange event I'm using returns the previously selected value instead of the current selected value. I have tweaked the code to print to console instead for testing. The :hint functionality works fine so I'm sure it's something to do with the onchange function. Codepen Here's the code: <template> <v-app> <v-container fluid> <v-layout row wrap> <v-flex xs6> <v

Vuetify: colors are not showing up

阅读更多关于 Vuetify: colors are not showing up

问题 I'm trying to integrate Vuetify to my existing Vue project, but the colors are not showing up correctly. I'm following the guide at https://vuetifyjs.com/en/getting-started/quick-start -> existing applications. The css file seems to be somehow loaded correctly as buttons seems to be highlighted with shadows and there are some click effects. However the colors and the text are not showing up correctly: My main.js import Vue from "vue"; import App from "./App"; import Vuetify from "vuetify";

Trying to bind props to v-model

阅读更多关于 Trying to bind props to v-model

I am using vuetify.js and trying to create a component which can be reusable across the application. Although its working absolutely fine, but I am not sure if it's the correct way. I am creating a navigation drawer component which has the same menu options all the time but it can be opened from UI elements. Below is the code. // NavigationBar.vue <template> <v-navigation-drawer temporary v-model="drawerFlag" light overflow fixed > <v-list> <v-list-tile> <v-list-tile-action @click.stop="toggleDrawer()"> <v-btn icon> <v-icon>close</v-icon> </v-btn> </v-list-tile-action> </v-list-tile> </v-list>

Accessing VUE JS's data from Axios

阅读更多关于 Accessing VUE JS's data from Axios

问题 I have a Vue JS (Vuetify) App that makes an ajax request that I would like to populate a div's content with the response, however I am having difficulties accessing the instance's data . All examples I have seen use this to point to the data object, but when I do I get this error Unable to set property 'message' of undefined or null reference The app is quite simple: main.js : import Vue from 'vue' import App from './App.vue' import Vuetify from 'vuetify' Vue.use(Vuetify) new Vue({ el: '#app'

vuetify center items into v-flex

阅读更多关于 vuetify center items into v-flex

I'm trying to center a <v-btn> into a <v-flex> . Since <v-flex> is a flexbox div, I use justify-center that is transformed into justify-content: center Since my direction is horizontal, my button should be center aligned but it's not. Here is the codepen that reproduce my problem. https://codepen.io/anon/pen/ZXLzex I want to signup the button to be centered inside the div (v-flex). Here is the full code: <v-card> <v-card-text > <v-text-field label="Email"></v-text-field> <v-text-field label="Password"></v-text-field> </v-card-text> <v-card-actions> <v-layout row> <v-flex justify-center> <v-btn

Vuetify how to mark field as required

阅读更多关于 Vuetify how to mark field as required

问题 When we try to fill forms in the internet, required fields are marked using a red color ' * ' mark to indicate that the field is a must. Like that is there a way to indicate users to required fields in vuetify.js? 回答1: From v1.1.0 docs: The required prop no longer explicitly adds an asterisk to the label. All of its functionality to validation was removed for v1.0. So apparently nothing will set it as required anymore, we have to add it manually in the label: label="Name*" Or you could use

How to use Vuetify tabs with vue-router

阅读更多关于 How to use Vuetify tabs with vue-router

I have the following jsfiddle that has two Vuetify tabs. The documentation doesn't show examples on using vue-router with them. I found this Medium.com post on how to use Vuetify with vue-router , which has the following code: <div id="app"> <v-tabs grow light> <v-tabs-bar> <v-tabs-item href="/" router> <v-icon>motorcycle</v-icon> </v-tabs-item> <v-tabs-item href="/dog" router> <v-icon>pets</v-icon> </v-tabs-item> </v-tabs-bar> </v-tabs> <router-view /> </div> However, the code is now outdated as the Vuetify 1.0.13 Tabs documentation doesn't specify a router prop in their api, so the embedded

Open a Vuetify dialog from a component template in VueJS

阅读更多关于 Open a Vuetify dialog from a component template in VueJS

I'm using the VueJS Vuetify framework and I need to open a dialog - that gets imported as a component template - from another template. Once the Menu button in App.vue got clicked, the Modal should open. Here is my setup: App.vue = navigation template with Menu button Modal.vue = Modal template, imported as global in main.js main.js import Modal from './components/Modal.vue' Vue.component('modal', Modal) Modal.vue Template: <template> <v-layout row justify-center> <v-btn color="primary" dark @click.native.stop="dialog = true">Open Dialog</v-btn> <v-dialog v-model="dialog" max-width="290"> <v

Vuetify text field border missing

阅读更多关于 Vuetify text field border missing

问题 I'm trying to implement Veutify's text field This is what it looks like for me right now: And this is what it looks like when the text field is in focus: These are my imports in main.js import Vue from 'vue'; import Vuetify from 'vuetify'; Vue.use(Vuetify); Am I missing an import or something? 回答1: I ran in the same issue, you need to wrap your application in a <v-app> . The reason is that the border's color depends on the theme you're using. If you try to inspect the documentation you will

Using custom theming in Vuetify and pass color variables to components

阅读更多关于 Using custom theming in Vuetify and pass color variables to components

In my index.js file I have manually override the Vuetify theme object with my company's color: Vue.use(Vuetify, { theme: { primary: '#377ef9', secondary: '#1b3e70', accent: '#ff643d', error: '#ff643d' ... } Now, I can use these colors from my templates like so: <my-text-field name="input text" label="text" value="text text text text..." type="text" color="primary"> </my-text-field> What I'm after is using the primary or any other variable in the theme object defined above, inside my template style: <script> import { VTextField } from 'vuetify' export default { extends: VTextField } </script>