vuetify.js

问题 I am new on Vue and Vuetify framework. and I directly copy these code from Vuetify. https://vuetifyjs.com/en/components/navigation-drawers Here is the code. https://codepen.io/kellymei/pen/NBzBEG Output of the code below then Vuetify nagviation drawer main text (hi) displays on bottom instead of the right side I want it to be in the right side of the nagviation drawer. Please help thanks so much!!!!!! <div id="app"> <v-app id="inspire"> <v-navigation-drawer stateless value="true" > <v-list>

问题 This is a vue.js project and this project is for a car sales company. I have a table and this table contains information about each car as in the picture. And as we note that for the table there is a header and there are lines under the head and are the Items which are the information of each car for each column. And there is a column called Action, and within this column I want to put two icons, the first is delete and the second is edit. Note that the data for the car information comes from

问题 In my AudioPlayer component, I have a v-slider I cannot get the value after cha,ging the slide position ;-) <v-slider @change="setPosition()" :value="trackProgress" :v-model="percentage" thumb-label></v-slider> data() { return { percentage: 0 }; }, computed: { trackProgress: function() { return this.progress * 100; } }, methods: { setPosition() { console.log("SET POSITION: ", this.percentage); // always 0 !!! // this.setProgress(this.percentage / 100); // this.togglePlayback(); } }, 回答1: You

问题 I have my image property and select in template: <v-img src='/logos/some.jpg' @click='click_select'/> <v-select :items="currencySelect" ref='select'/> and in methods, I have method: click_select(){ this.$refs.select.onClick; } Clicking on image doesn't do anything and no errors logs 回答1: Just add a callback handler for that event like : this.$refs.select.onClick((e) => { }); Full example var app = new Vue({ el: '#app', vuetify: new Vuetify(), data: { currencySelect: ['a', 'b', 'c'] }, methods

问题 Is it possible to set hide-on-leave transition to be used only once after certain condition is met? <v-slide-x-transition hide-on-leave> <span v-if="isAdded(this.idUn)"> Added <v-icon> mdi-check </v-icon> </span> </v-slide-x-transition> Lets say if the condition is fulfilled this transition would not be called anymore. In the example below you can see that even though condition is met you can still see transition of the button being applied to the disabled button when switching from enabled

问题 I'm creating an expandable datatable in Vuetify . Only 5 columns are displayed in the table headers. When you expand each line, you get the detailed information, using the item.data-table-expand slot, which shows more columns available in the data array. Now I want to be able to apply a search filter on the table. My problem is that the search directive only searchs in the fields declared in the headers (the 5 columns), and I need to search in the other fields. I tried adding a searchable

问题 I would like to create a Vuetify table with nested data. The problem is that v-slot:item doesn't seem to work with nested data. This is my code: https://codepen.io/blakex/pen/XWKWjaE <v-data-table :headers="headers" :items="desserts"> <template v-slot:item.calories="{ item }"> <td>Slot works: {{ item.calories }}</td> </template> <template v-slot:item.nested.nestedCalories="{ item }"> <td>Nested slot works: {{ item.nested.nestedCalories }}</td> </template> </v-data-table> data () { return {

问题 I would like to create a Vuetify table with nested data. The problem is that v-slot:item doesn't seem to work with nested data. This is my code: https://codepen.io/blakex/pen/XWKWjaE <v-data-table :headers="headers" :items="desserts"> <template v-slot:item.calories="{ item }"> <td>Slot works: {{ item.calories }}</td> </template> <template v-slot:item.nested.nestedCalories="{ item }"> <td>Nested slot works: {{ item.nested.nestedCalories }}</td> </template> </v-data-table> data () { return {

问题 everybody ! I have a question, is possible to click on the tooltip content for call any function ? When my tooltip is open i want to click on the span for call test function. <template> <v-tooltip v-model="show" open-on-click :open-on-hover="false" bottom close-delay="2000"> <template v-slot:activator="{ on }"> {{on}} <v-btn color="primary" dark v-on="on" fab x-small class="btn"> <v-icon>mdi-pencil</v-icon> </v-btn> </template> <span @click="test">click<span> </v-tooltip> </template> <script>

问题 I've got an array of objects: productos[] , I use this to populate the v-datatable . I've been trying to add the search texfield such as the Vuetify documentation says. I've added this but it only works (for some reason) with the headers that has numbers and it doesn't work for example when you type a string. I think i'm doing something wrong. Search textfield: <v-text-field v-model="search" append-icon="search" label="Search" single-line hide-details ></v-text-field> v-datatable <v-data