Posted By: Anonymous I’m trying to show loading state in v-simple-data, but for some reason, it doesn’t work, maybe there is another way to do it? Here is my code: https://codesandbox.io/s/vuetify-template-forked-bmobx?file=/src/App.vue Solution You are resetting the dataLoading variable outside of the timeout. Therefore it is immediately set to false. You should move it inside the …
Posted By: Anonymous How to change the unchecked state color of a Vuetify radio button and add a background color? (Currently it is just a grey outline. I need to change the outline and background color.) Solution Vuetify uses an SVG icon to render the radio button and the icon itself is just a circular …
Posted By: Anonymous How would one import the ‘md’ icons locally, similar to how they import the mdi ones in this post: How to import the mdi icons module inside nuxt.config.js in Nuxt Either the standard package or the custom repo https://github.com/jossef/material-design-icons-iconfont I’m using the nuxt-vuetify plugin. All my attempts have failed, e.g adding this: …
Posted By: Anonymous The new tab is missing from the browser context menu in Nuxt.js projects. I need to make sure my clients can freely open links in a new tab. How can I add this feature globally in Nuxt.js? Solution Do you use the v-btn component with the link prop? https://vuetifyjs.com/en/api/v-btn/#props-link If the generated …
Posted By: Anonymous I need to get row by event but it only give me event and undefeated, how to catch items in v-data-table <v-data-table :headers="showHeaders" :page="page" :pageCount="numberOfPages" :options.sync="options" :loading="loading" :server-items-length="totalItems" :items="items" :items-per-page="15" class="mainTable" @dblclick:row="editItem(item, $event )" :footer-props="{ showFirstLastPage: true, firstIcon: ‘mdi-arrow-collapse-left’, lastIcon: ‘mdi-arrow-collapse-right’, prevIcon: ‘mdi-minus’, nextIcon: ‘mdi-plus’ }" —method— editItem (item, e) { console.log(item) …
Posted By: Anonymous I am trying to detect the change event of date picker. It was working fine when user selects multiple days from the calendar. But if user selects a single date, change method not get triggered. My attempt is as below. <v-date-picker v-model="dates" range color="primary" id="calendar1" @change="sendRange" ></v-date-picker> sendRange(): void { console.log("executed") // …
Posted By: Anonymous I have an error trying to get data from my vuex store. Property or method "cart" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. Property or method "cartItems" is not …
Posted By: Anonymous The Vuetify v-data-table component has a rows-per-page select box at the bottom of the table, the problem is it’s not a select box in html, so I’m having a ton of trouble testing the changing of options using Cypress, I’ve got as far as this piece of code: cy.get(‘#app > div.v-application–wrap > …
Posted By: Anonymous The default v-switch can be clicked on the surface of a switch and a label only. I want to append the padding area in v-switch. My switch locates inside the v-app-bar. <template> <v-app-bar app color="blue"> <v-switch id="switch-to-run" class="py-5 " inset color="purple" label="Execute Program" hide-details="auto"/> </v-app-bar> </template> However, there is no extra area. …
Posted By: Anonymous I’m trying to stack icons as explained here https://fontawesome.com/v5.15/how-to-use/on-the-web/styling/stacking-icons but in my project i’m using vuejs and vuetify my icons are thus inside a v-icon element. Here is what i tried : <div class="fa-stack fa-2x"> <v-icon>fas fa-camera fa-stack-1x</v-icon> <v-icon>fas fa-ban fa-stack-2x</v-icon> </div> It just show the icon one after the other and …
Posted By: Anonymous I need to create v-text-field without background, borders or shadows, is that possible? Docs specify only these types: But neither of them suit my needs. What’s the simplest way to achieve this? I tried this but it didn’t remove the background (in dark mode). Solution You can override default v-text-field styles in …
Posted By: Anonymous I’m currently using vuetify and I need to make each row act as a tag and make sure it’s opens in new tab. My table looks like this: <v-data-table :headers="headers" :items="campaigns" calculate-widths :loading="loading" :search="search" :items-per-page="15" @click:row="showCampaignReport" > </v-data-table> I’m using @click:row="showCampaignReport" now and it works fine but the problem is that there …
Posted By: Anonymous I’m trying to install Vuetify on top of a fresh Vue project just created via Vue CLI > vue create vuetify. However I end up with this every time when I serve the project to the browser: Additionally, in the terminal that launched the server, I get: …suggesting the Vuetify plugin isn’t …
Posted By: Anonymous I use Vuetify but disabled the import of all icons since treeshaking wasn’t working properly in Nuxt, instead I followed the advice and import them manually as stated in this thread: vuetifyjs: Adding only used icons to build However, this means that a lot of components that require icons, e.g v-checkbox, v-select …
Posted By: Anonymous I have a table with a list of records and each record with two associated radio buttons, one to confirm payment and another to reject, when I pick up on any of the radio buttons I get a modal screen with two buttons, one to definitively confirm a payment and the other …
Posted By: Anonymous I have a data list like this [ { "name":"UMBERTO", "description":"Some description", "application_area":{ "LegalCompliance":false, "Certification":true, "Accounting":true, "LifeCycle":true, "Reporting":true, "DecisionSupport":true, "CompanyAssociations":true }, "object_of_observation":{ "Waste":false, "Facilities":false, "DangerousSubstances":false, "Emission":false, "Energy":true, "MaterialFlow":true, } }, … ] I want to filter this list by several checkboxes like this: the filters should be connected by logical AND, right …
Posted By: Anonymous ref: Display helpers Is there a way to change differrent css style dynamically depend on size of current breakpoint. Something like when windows are current on xs size/position/color are differ from md and so on…. Solution For vuetify utility classes, you insert the breakpoint in the class name. pa-2 defaults for xs …
Posted By: Anonymous Im new too nuxtjs and vuex, unfortunately i got some errors trying too fetch my data from vuex; [Vue warn]: Property or method "products" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing …
Posted By: Anonymous I have a vuew application which generates an array which I want to send to my Spring boot application to save to a db. The use case is like this. The user can add as many Times objects as he wants which consists of: Date,start and endtime. but the json output is …
Posted By: Anonymous I would like an application layout that has a fixed toolbar at the top and a left-hand navigation drawer underneath. In addition the navigation drawer should behave as “temporary”, i.e. the user can click outside of the drawer to dismiss it. I can get the visual effect I want with a non-temporary …
Posted By: Anonymous I’m trying to get the v-tabs to work with my expand menu. Basically when I click the toggle open, the right side menu will slide out, and inside this menu I want to use the tabs component from vuetify. It doesn’t seem to work, when clicking on the tabs, it’s jumping all …
Posted By: Anonymous I would like to implement an input field that can be unlocked by the user if needed. Visually, I was thinking that the button should be either outside or inside the field but strongly linked to it. To do so, I have been using the Vuetify Text Field’s append-outer-icon props : The …
Posted By: Anonymous I am using Laravel 5.8 which includes Vue JS in it by default and I want to use Vuetify. Here is what I have done I have followed exactly what is written in the blog https://codersdiaries.com/laravel-vuetify/ and I am getting an error message in the console that [Vue warn]: Error in beforeCreate …
Posted By: Anonymous For some reason whatever I do the label here refuses to be on one line, here is my code: <v-container class=”px-3″> <v-layout justify-center> <v-flex xs12 sm10> <v-layout align-center justify-start> <v-flex lg3> <v-switch v-model=”displayAllUsers” @click.native.stop color=”primary” :label=”‘All users'” @change=”toggleAllUsers()” ></v-switch> </v-flex> </v-layout> </v-flex> </v-layout> </v-container> Also attached is a pic of what it …
Posted By: Anonymous i’m trying my form data submit. when i try my code form.append(‘subject’,”hello”), It is good working. but form.append(‘subject’, ‘this.subject’) => return ‘undefined’. how do i solve it? form.append(‘subject’,”hello”), it is good working. but form.append(‘subject’, ‘this.subject’) => return ‘undefined’. My Write.vue is : <template> <v-form @submit.prevent=”sendPost” id=”WriteForm” method=”post”> <v-btn icon type=”submit” form=”WriteForm”><v-icon>send</v-icon></v-btn> <v-text-field …
Posted By: Anonymous How to disable options in v-autocomplete? I did see this item-disabled and passed the string value of the option it didn’t work. code snippet <v-autocomplete :items=”states” item-text=”name” label=”State” item-disabled=”Florida” ></v-autocomplete> Solution <v-autocomplete :items=”states” item-text=”name” label=”State” ></v-autocomplete> Simply add a disabled prop to your Object: states: [ { name: “New York”, disabled: true …
Posted By: Anonymous I want to populate a component data using a method with Axios. However, with Axios, the component data is always undefined. If I don’t use Axios (hardcode the return value), the component data populates correctly. data () { return { myData: this.getData(); } }, methods:{ getData(){ axios({ method: ‘GET’, url : ‘Department/GetAllForDropdown’, …
Posted By: Anonymous 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 …
Posted By: Anonymous I am looking at the tutorials on vues page for adding tooltips. https://vuetifyjs.com/en/components/tooltips It seems to work fine for an individual button. However, it does not work within a v-item. I get a console message saying ‘[Vuetify] v-item is missing a default scopedSlot’ <v-item v-for=”foo in bars” :key=`${foo}`> <v-tooltip> <v-btn slot=”activator”> <v-icon>some-icon</v-icon> …
Posted By: Anonymous How to keep the current page in data tables in vuetify when the items is changed. the current page is 2, add new item to items how to keep the current page 2 Codepen Solution Before adding items to the data table, you can save the current page number and re-use it …
