Vuetify

Vuetifyのv-file-inputでファイルアップロード

Vuetifyのv-file-inputを使用して、ファイルをアップロードするサンプルです。 v-file-inputにデータバインディングし、紐付いた値(ファイル)をFormDataに追加して、アップロードします。 環境 Vuetify 2.2.3 サンプル <template> <form> <v-file-input v-model="file"> <template v-slot:append-outer> <v-btn height="32" :disabled="!file" @click="upload" >Upload</v-btn> </template> </v-file-input></form></template>

Vuetifyのdatatableのカラム数を動的に変更する

headersをcomputedにして、filterの条件でカラム数を制御する。 環境 Vuetify 2.1.0 サンプル <template> <v-data-table :headers="headers" :items="items" :options="options" > </v-data-table> <script> export default { computed: { headers() { return [ { text: 'Important', align: 'center', sortable: true, value: 'important', }, { tex…</template>

Vuetifyでレスポンシブなwidth、heightを取得する

以下のプロパティからレスポンシブな値が取得できる。 $vuetify.breakpoint.width $vuetify.breakpoint.height 環境 Vuetify 2.1.0 サンプル <template> <v-data-table :headers="headers" :items="items" :options="options" :height="$vuetify.breakpoint.height - 200" > </v-data-table> </template> 参考 Breakpoints — Vuetify.js