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 …
Posted By: Anonymous What is the correct way to include Vuetify’s material-icons styles inside a web component, so that it is accessible in the shadow without any external links in parent (since web components do not have an index.html)? I am targeting a wc like this: vue-cli-service build –target wc –name my-element ‘src/components/mycomponent.vue’ so, all …
Posted By: Anonymous Working with VueJS and trying to style some text based on Vuetify’s viewport breakpoints I have achieved this by binding the style to a condition like this: :style=”$vuetify.breakpoint.name === ‘xs’ ? { ‘font-size’: ‘1.5rem !important’ }: { ‘font-size’: ‘2.5rem !important’ }” however I would like to use computed property instead just to …
Posted By: Anonymous I have a checkbox component defined like so: let checkbox = this.$createElement(VCheckbox, { props: { hideDetails: true } }); In my code I can get a reference to this component. In other words I have access to this checkbox variable. What I want is to set property programmatically. By property I mean …
Posted By: Anonymous Hi there! [SOLVED] I’m trying to recreate a page using Vue.js and Vuetify, but I don’t know how can I get the following result with my buttons: This is my goal: https://i.imgur.com/CGkrz6R.png This is what I have now: https://i.imgur.com/hKxkpOq.png As you can see, I just need to remove the RED part inside …
Posted By: Anonymous when I am trying to select a node in the Vuetify tree-view in leaf mode, I am getting only the leaf nodes in the v-model. Is there a way that I could get all the children node along with the selected parent node. Vuetify Version: 2.2.18 Link to the code: https://codepen.io/pen/?&editable=true&editors=101 Result …
Posted By: Anonymous I’m building a web app using ASP.NET CORE as the backend and vue.js as the frontend. Using Vuetify’s current CRUD Datatable UI Component (compatible with Vue.js2) for a page called “Category”, I’ve run into the problem of trying to change the Category’s “State” column value (as in if the Category is “Active” …
Posted By: Anonymous I have some reusable components: TextField Form And a component where I import them both. I pass the TextField component as props to the Form. In this Form component I have a submit button which needs to get all the values from the passed TextField components. As far as I could read …
Posted By: Anonymous i am trying to set mutliple text items in a v-select. at the moment this is my v-select and its working with one :item-text. But i need to display two fields. so i was checking the documentation and tried to use slots. <v-select :disabled=”isReadOnly()” v-show=”!isHidden()” :label=”getLabel()” :hint=”field.description” :items=”selectVal” :item-value=”field.options.select.ValueField” :item-text=”field.options.select.TextField” :multiple=”isType(FieldType.ManyToMany)” :chips=”isType(FieldType.ManyToMany)” …
Posted By: Anonymous I am trying to create a row and column-based on array values. Currently, this is what I have in my component: _x000D_ _x000D_ <template>_x000D_ <v-col cols=”columnnum”>{{value}}</v-col>_x000D_ </template> _x000D_ _x000D_ _x000D_ Right now value and columnnum are both props with the detail coming from the parent. I am checking to see if the …
Posted By: Anonymous I have two nested Vue JS components: ‘States – Parent’ => ‘admin-data-table – Child’. Inside the child component there is a button that emits an event back to the parent when clicked: Child component – admin-data-table: <template> <v-data-table :ref=”modelName + ‘Table'” :value=”selectedList” @input=”$emit(‘update:selectedList’, $event)” :headers=”dataTable.headers” :items=”collection” :pagination.sync=”dataTable.pagination” select-all item-key=”id” class=”elevation-1″ > <template …
Posted By: Anonymous I have multiple casceded v-expansion-panels to visualize a folder sturcture. Like in this example with items and innerItems <v-expansion-panels accordion focusable > <v-expansion-panel v-for=”(item, x) in items” :key=”x” > <v-expansion-panel-header> {{ item.header }}</v-expansion-panel-header> <v-expansion-panel-content class=”v-expansion-panel-content”> <v-expansion-panels> <v-expansion-panel v-for=”(innerItem, y) in innerItems” :key=”y” > <v-expansion-panel-header> {{ innerItem.header }} </v-expansion-panel-header> <v-expansion-panel-content> {{ innerItem.content }} …
Posted By: Anonymous I’m using the Vue.js library Vuetify to add a few text field components inside on a component that I create. In order to provide input validation I would like to capture the hasError property of the text field components. I know the path of the property is: this.$children[3]._computedWatchers.hasError.active. But I would like …
Posted By: Anonymous i am trying to create a Vuetify footer and i am running into some issues. I have made a Codepen here https://codepen.io/anon/pen/mYazWv. I am new to vuetify so i’m trying to see how i can put the title in the center and push the checkbox to the right along with the buttons …
Posted By: Anonymous I’m trying to use VAutocomplete within a vue component in my laravel project. I installed vuetify like this: npm install vuetify The .js with which I load the component looks like this: import Vue from ‘vue’ import Vuetify from ‘vuetify’ Vue.use(Vuetify) import ‘vuetify/dist/vuetify.min.css’; import MyComponent from ‘./components/MyComponent.vue’; const app = new Vue({ …
Posted By: Anonymous I’m trying to make my navigation drawer to act as the following: When I lick on a v-list-item I want it to close any v-list-group that was opened When I reload the page I would like to reopen the v-list-group and highlight its v-list-item that is related to the page that the …
Posted By: Anonymous I have a Vue file that looks like so : import store from ‘@/store’ export default{ name: ‘myList’, data: () => ({ show: true, listContent: [{ name: ‘1’, icon: ‘person’, value: function () { return store.state.myStore.settings.one } }, { name: ‘2’, icon: ‘person’, value: function () { return store.state.myStore.settings.two } }, { …
Posted By: Anonymous I’m using Vuetify to create my dropdown. I can select a value, push it to the firebase database, but refresh of the page I cannot populate the dropdown. Here is the template: <template> <v-select v-bind:items=”itemsPhone” v-model=”telephoneType1″ id=”telephone-pro-type-1″ label=”Select” single-line bottom > </v-select> </template> <script> export default { data () { return { …
Posted By: Anonymous This should be a simple fix but I can’t figure it out. Please excuse my lack of posting my whole code. Here is the issue. I am using the following ` <v-card> <v-img :src=“{{person.png}}â€</v-img> <v-card> ` I have an array of users with profile images. Some of these images are different sizes …
Posted By: Anonymous I have a tiny project that I am building using vuetify 2, but the issue I am coming across is in a col with width 7, all my cards are showing up vertically, instead of a horizontal overflow. What I am hoping to achieve is that the cards are vertical to each …
