vuetify.js

Vuetify toggle between light and dark theme (with vuex)

喜你入骨 提交于 2021-02-20 09:08:35
问题 so in my Vue-project I basically have two pages/components that will be shown with the use of vue-router depending on the url. I can switch between those pages/components via a button. I am also using vuex for the management of some data. Now I included a switch in one of the components to toggle between a dark and a light theme from vuetify. In the template for this component I do: <v-switch label="Toggle dark them" @change="toggleDarkTheme()" ></v-switch> And in the function that gets

Vuetify toggle between light and dark theme (with vuex)

只谈情不闲聊 提交于 2021-02-20 09:04:54
问题 so in my Vue-project I basically have two pages/components that will be shown with the use of vue-router depending on the url. I can switch between those pages/components via a button. I am also using vuex for the management of some data. Now I included a switch in one of the components to toggle between a dark and a light theme from vuetify. In the template for this component I do: <v-switch label="Toggle dark them" @change="toggleDarkTheme()" ></v-switch> And in the function that gets

VueJS error Avoid mutating a prop directly

大憨熊 提交于 2021-02-18 21:53:09
问题 I'm trying to create a modal but I'm getting this error only when I close it: [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "value" found in ---> <PanelDesconectarModal> at resources\assets\vue\PanelDesconectarModal.vue <VNavigationDrawer> <PanelDrawer> at resources\assets\vue\PanelDrawer.vue <VApp> <PanelRoot> at resources\assets

­ inserted into string in Vuetify crashing Chrome tab

放肆的年华 提交于 2021-02-11 14:03:47
问题 Context I have a Vue app, in which I want to display lengthy strings - e.g. contents of large jsons. When testing it with one of such files my Chrome tab started crashing. After further investigation I discovered: problem occurs only in Chrome - Firefox works fine problem occurs only when text is embedded within a Vuetify grid problem occurs only when a specific short string is part of the json Code Please have a look at https://codesandbox.io/s/damp-frog-70sxh. In this example app if you

How disable to select minutes in v-time-picker widget?

微笑、不失礼 提交于 2021-02-11 13:49:15
问题 In my Vue.js application, I use v-time-picker widget of the Vuetify framework. I want to disable to select minutes. If user select hour, automatically inserted 00 in minutes. How to make it correctly? Right now I set allowed-minutes props but in that case, user needs to select minutes anyway. <template> <v-time-picker full-width scrollable format="24hr" :disabled="timePickerDisabled" :allowed-minutes="allowedMinutes" v-model="selectedTimePickerItems"> </v-time-picker> </template> <script>

Vuetify list : open group according to active route

ぃ、小莉子 提交于 2021-02-11 12:37:57
问题 Let's suppose I have a Vuetify list with 2 v-list-group, each one containing a v-list-tile. Here is a simplified pseudo-code: - Group1 - Item 1 :to='/item1' - Group2 - Item 2 :to='/item2' My list works fine : if I click on "Item1", vue-router goes to "/item1". Conversely, when I go to some route '/item1' (by typing the URL for example) and Group1 is closed in the list, is it possible to make Group1 to automatically open in the list? Do I have to watch route and use v-list-group.value to set

Stylization vuetify component v-expansion-panel__header

喜夏-厌秋 提交于 2021-02-11 12:36:20
问题 I have a Vuejs component with Vuetify and pug. .moreQuestion__wrapper v-expansion-panel.moreQuestion__wrapper-panel v-expansion-panel-content(v-for="(question, i) in questions" :key="i" expand-icon="arrow_drop_down") <template v-slot:header> .moreQuestion__wrapper-slot {{ question }} </template> v-card v-card-text.moreQuestion__wrapper-text {{ content }} What the main problem - I've to override padding-right for v-expansion-panel__header. What the main problem - I've to override padding-right

Vuetify format cell based on item type

徘徊边缘 提交于 2021-02-11 12:12:40
问题 I'm not sure if this can be done, but I would like to format some dynamically created columns based on a property. If the item does not have that property, I would like it to fall back to the default behavior. Below is an example of what I'm trying to do (though the syntax is incorrect since you can't do item.type === foo in the template <v-data-table :item="items" ... > <template #[`item.type === 'foo'`]="{ item } "> // Do a special format for any items that have a type of foo </template> <

How do I stop displaying the inline validation error message in Vuetify?

女生的网名这么多〃 提交于 2021-02-11 08:28:05
问题 I need to display all form validation errors in one alert at the top of a form when the user clicks submits (not inline with the input elements). How do I suppress the inline validation error message if I am using Vuetify and Vee-Validation. (I will display errors in an alert using the $errors array). There is nothing about this in the documentation. I tried not passing anything in error-messages, but then I lose the red outline on the invalid field. My field is configured like this <v-text

Retrieve data from an API and pass them in a Vuetify table

自闭症网瘾萝莉.ら 提交于 2021-02-11 06:11:32
问题 I was assigned to do this project as part of my application for a Junior Developer position. I have never worked on Vue.js and they assigned me with this project asking to retrieve JSON data from an endpoint and projecting them in a vuetify table. My main issue is with the vuetify table i can not understand the difference with the normal html table. Moreover i can not understand whether i have to do a small app using html and js files or to use node.js also and work on it. However i did find