vuetify.js

问题 I have a Vuetify Datatable <v-data-table :headers="headers" :items="members" item-key="id" v-model="selected" :search="search" > <template slot="items" slot-scope="props"> <tr :active="props.selected" @click="select(props.item)"> <td>{{ props.item.name }}</td> <td class="text-xs-right">{{ props.item.FirstName}}</td> <td class="text-xs-right">{{ props.item.LastName }}</td> <td class="text-xs-right">{{ props.item.email }}</td> <td class="text-xs-right">{{ props.item.department}}</td> <td class=

问题 Vuetify data table not showing data, it shows that there are 1 row out of 1 displayed, but the table body is empty. My component code: <template> <v-data-table :headers="headers" :items="desserts" > </v-data-table> </template> <script> export default { name: 'Users', data () { return { headers: [ { text: 'Dessert (100g serving)', align: 'left', sortable: false, value: 'name' }, { text: 'Fat (g)', value: 'fat' }, ], desserts: [ { name: 'Frozen Yogurt', fat: 6.0, }, ] } } } </script> <style

问题 I read on this docs : https://github.com/pqina/vue-filepond I try to add like this : <FilePond allowMultiple="true" accepted-file-types="image/jpg, image/jpeg, application/pdf" maxFileSize="2MB" required="true"/> multiple, validation file type, max file works But, required does not works How can I solve this problem guys? 回答1: Using the v-bind:required prop works: <form method="post" action=""> <file-pond v-bind:required="true"/> <button type="submit">submit</button> </form> Related GitHub

问题 I want to ask methods: { allowedDates(date) { console.log(date) } }, it will console.log all date on every month selected But if I add script ajax/async like this : methods: { allowedDates(date) { console.log(date) this.getData({appDate: date}); // this is async/call ajax on the vuex store } }, it's async without stopping is allowedDate not usable for async or ajax? docs : https://vuetifyjs.com/en/components/date-pickers#date-pickers-allowed-dates Update I try to testing for make sure like

问题 I want to ask methods: { allowedDates(date) { console.log(date) } }, it will console.log all date on every month selected But if I add script ajax/async like this : methods: { allowedDates(date) { console.log(date) this.getData({appDate: date}); // this is async/call ajax on the vuex store } }, it's async without stopping is allowedDate not usable for async or ajax? docs : https://vuetifyjs.com/en/components/date-pickers#date-pickers-allowed-dates Update I try to testing for make sure like

问题 I want to ask methods: { allowedDates(date) { console.log(date) } }, it will console.log all date on every month selected But if I add script ajax/async like this : methods: { allowedDates(date) { console.log(date) this.getData({appDate: date}); // this is async/call ajax on the vuex store } }, it's async without stopping is allowedDate not usable for async or ajax? docs : https://vuetifyjs.com/en/components/date-pickers#date-pickers-allowed-dates Update I try to testing for make sure like

问题 I am upgrading Vuetify in my Vue CLI 3 project from version 1.5 to 2. I have followed these instructions, doing a full install. Since the upgrade, running 'npm run serve' gives me a ton of errors looking like this: error in ./node_modules/vuetify/src/components/VGrid/_grid.sass Module build failed (from ./node_modules/sass-loader/dist/cjs.js): ValidationError: Invalid options object. Sass Loader has been initialised using an options object that does not match the API schema. - options has an

问题 test (e) { e.preventDefault() console.log('foo') }, <v-expansion-panel> <v-expansion-panel-content> <div slot="header"> <v-btn icon flat @click="test($event)"><v-icon>add</v-icon></v-btn> title </div> <contents /> </v-expansion-panel-content> </v-expansion-panel> This is v-expansion-panel with action button in it's header. When I click action button, expansion panel is opened. Can I have expansion panel doesn't open when I click the button? 回答1: By using @click.native.stop on v-btn your

问题 test (e) { e.preventDefault() console.log('foo') }, <v-expansion-panel> <v-expansion-panel-content> <div slot="header"> <v-btn icon flat @click="test($event)"><v-icon>add</v-icon></v-btn> title </div> <contents /> </v-expansion-panel-content> </v-expansion-panel> This is v-expansion-panel with action button in it's header. When I click action button, expansion panel is opened. Can I have expansion panel doesn't open when I click the button? 回答1: By using @click.native.stop on v-btn your

问题 How to use v-tooltip inside v-menu activator with vuetify 2.0? Previously it was working using slot="activator" . That's what I'm trying to combine: <v-menu> <template v-slot:activator="{on}"> <v-btn v-on="on">Menu Trigger</v-btn> </template> ...list with menu options... </v-menu> and <v-tooltip v-slot:activator="{on}"> <v-btn v-on="on">Menu Trigger with Tooltip</v-btn> <span>Tooltip Content</span> </v-tooltip> Now I try to paste v-tooltip inside v-menu, what should happen with {on} here? 回答1