vuetify.js

As of date of posting, I cannot find any documentation to use the "custom filter" prop in data tables. I just want to create a custom filter to filter my data table by headers. I have a dropdown, and when user click on one of the options for the dropdown, it will filter the list for one specific header. Example: Dropdown options: Food type: fruit, meat, vegetable Bakchoi (vegetable) Pork (meat) Chicken Thigh (meat) watermelon (fruit) If I select dropdown as meat, it should only show me pork and chicken thigh. Looking at the code on Github , it looks like the customFilter prop is used to

Please advise how to make vuetify v-tabs content displayed in equal height blocks. I found no options for this component in documentation which can help with height alignment. By default v-tab-item height depends on its own content height: Layout example: <div id="app"> <v-app id="inspire"> <div> <v-tabs v-model="active" color="cyan" dark slider-color="yellow"> <v-tab :key="tab-1"> tab 1 </v-tab> <v-tab :key="tab-2"> tab 2 </v-tab> <v-tab-item key="tab-1"> tab 1 content<br> tab 1 content<br> tab 1 content<br> tab 1 content<br> tab 1 content<br> </v-tab-item> <v-tab-item key="tab-2"> tab 2

Hello i have some code from vuetify ( https://vuetifyjs.com/en/components/cards#custom-actions ) so i edited code like this: <template> <div> <div v-for="item in 3" :key="item"> <v-layout row > <v-flex xs12 sm6 offset-sm3> <v-card> <v-img src="https://cdn.vuetifyjs.com/images/cards/sunshine.jpg" height="200px" > </v-img> <v-card-title primary-title> <div> <div class="headline">Top western road trips</div> <span class="grey--text">1,000 miles of wonder</span> </div> </v-card-title> <v-card-actions> <v-btn flat>Share</v-btn> <v-btn flat color="purple">Explore</v-btn> <v-spacer></v-spacer> <v-btn

I'm trying to show "locations" in a vuetify select component, but my current code renders "[object Object]" instead of Location 1, Location 2, etc. My select component: <v-select :items="locations" v-model="location" label="Choose Location" bottom autocomplete ></v-select> Locations: locations () { return this.$store.getters.getLocationsForEvent(this.event.id) } Vuex Getter: getLocationsForEvent: (state) => (id) => { return state.loadedLocations.filter(function (location) { return location.eventId === id; }); } Here is a screenshot of what the location data looks like: Thanks! For custom

Does anyone know how to test vuetify v-select with laravel dusk? I've tried $browser->select('size', 'Large'); without success this is one of the v-selects that i want to test <v-flex class="form__item"> <v-select id="estatus" dusk="estatus" v-model="form.id_estatus" label="Estatus" :items="estatus" item-text="nombre" item-value="id" v-validate="{ required:true }" data-vv-name="estatus" data-vv-as="estatus" :error-messages="(errors.collect('estatus'))" required ></v-select> </v-flex> And this the generated HTML When v-select is clicked, shows the option list in other part of the HTML Click on

I am using 2.0.0-beta.7 version of vuetify on a newly setup Vue project. I am getting below errors Error in getter for watcher "isDark": "TypeError: Cannot read property 'dark' of undefined" also, TypeError: Cannot read property 'dark' of undefined plugins/vuetify.js import Vue from 'vue'; import Vuetify from 'vuetify/lib'; const opts = { icon: { iconfont: 'fa', } }; Vue.use(Vuetify); export default new Vuetify(opts); main.js import Vue from "vue"; import Vuetify from './plugins/vuetify'; import App from "./App.vue"; import router from "./router"; import store from "./store"; Vue.config

I am using vue.js and vuetify. I want to add an icon but not working. (not rendered) How can i fix this? please refer to the following code main.js import Vue from 'vue' import Vuetify from "vuetify"; import "vuetify/dist/vuetify.min.css"; Vue.use(Vuetify); index.html <link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet"> calendar.vue <i class="material-icons"> keyboard_arrow_down </i> I want it to look like an icon, not code If you are using Vuetify, then you should simply use the <v-icon> component which supports both Material and