Skip to content
Fix Code Error

Tag: vuetify.js

Vuetify v-simple-table loading state

July 15, 2021 by Code Error

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 …

Continue Reading

Change unchecked state color of Vuetify radio button

July 15, 2021 by Code Error

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 …

Continue Reading

Vuetify + Nuxt + locally add md icons

July 12, 2021 by Code Error

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: …

Continue Reading

Open link in newtab missing from context menu

July 11, 2021 by Code Error

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 …

Continue Reading

Vuetify, how to get row by double click event in v-data-table

July 11, 2021 by Code Error

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) …

Continue Reading

v date picker not calling change event when single date is picked

July 11, 2021 by Code Error

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") // …

Continue Reading

Vuejs Error: Property or method “cart” is not defined on the instance but referenced during render. Property”cartItems” is not defined

July 11, 2021 by Code Error

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 …

Continue Reading

Cypress not targeting and changing the Vuetify v-data-table component’s “rows-per-page”

July 10, 2021 by Code Error

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 > …

Continue Reading

How to expand the clickable area of v-switch in vuetify

July 8, 2021 by Code Error

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. …

Continue Reading

Stack Font awesome Icons with Vuetify

July 6, 2021 by Code Error

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 …

Continue Reading

“Transparent” v-text-field in vuetify?

July 6, 2021 by Code Error

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 …

Continue Reading

Make v-data-table rows opens in new tab (vuetify)

July 4, 2021 by Code Error

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 …

Continue Reading

Adding Vuetify via Vue CLI leads to “Module not found” error

June 30, 2021 by Code Error

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 …

Continue Reading

Vuetify change checkbox icon in v-select / v-combobox

June 26, 2021 by Code Error

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 …

Continue Reading

Uncheck vue radio button from another button

June 25, 2021 by Code Error

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 …

Continue Reading

Vue filter list by multiple checkboxes

June 24, 2021 by Code Error

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 …

Continue Reading

css style depend on differrent breakpoints

June 22, 2021 by Code Error

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 …

Continue Reading

Vuejs error: Property or method “products” is not defined on the instance but referenced during render

June 21, 2021 by Code Error

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 …

Continue Reading

How to correctly output json as object

June 21, 2021 by Code Error

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 …

Continue Reading

Vuetify toolbar obscured by navigation drawer

April 21, 2021 by Code Error

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 …

Continue Reading

vuetify tabs component doesnt work correctly with flex animation

April 21, 2021 by Code Error

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 …

Continue Reading

Untie text field’s icon click enabling from the input one

April 21, 2021 by Code Error

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 …

Continue Reading

Using Vuetify in Laravel (Error: Vuetify is not properly initialized)

April 21, 2021 by Code Error

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 …

Continue Reading

vuetify v-switch label on two lines

April 21, 2021 by Code Error

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 …

Continue Reading

Vuetify Form Data Undefined

April 21, 2021 by Code Error

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 …

Continue Reading

Disable options in v-autocomplete

April 21, 2021 by Code Error

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 …

Continue Reading

How to populate component’s data with axios method in Vue.JS

April 21, 2021 by Code Error

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’, …

Continue Reading

How to “lock” Vuetify v-list-item-group selection?

April 21, 2021 by Code Error

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 …

Continue Reading

Missing a default scoped slot Vuetify

April 21, 2021 by Code Error

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> …

Continue Reading

keep current page in vuetify when items change

April 21, 2021 by Code Error

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 …

Continue Reading

Posts navigation

  • 1
  • 2
  • 3
  • 4
  • …
  • 25
  • Next

.net ajax android angular arrays aurelia backbone.js bash c++ css dataframe ember-data ember.js excel git html ios java javascript jquery json laravel linux list mysql next.js node.js pandas php polymer polymer-1.0 python python-3.x r reactjs regex sql sql-server string svelte typescript vue-component vue.js vuejs2 vuetify.js

  • you shouldn’t need to use z-index
  • No column in target database, but getting “The schema update is terminating because data loss might occur”
  • Angular – expected call-signature: ‘changePassword’ to have a typedeftslint(typedef)
  • trying to implement NativeAdFactory imports deprecated method by default in flutter java project
  • What should I use to get an attribute out of my foreign table in Laravel?
© 2022 Fix Code Error