Vuetifyでv-text-fieldの中の文字をセンタリングする方法 - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
Vuetifyでのバリデーションまとめ - inokawablog
Vuefityでのバリデーションをまとめる。 最初にバリデーションの一連の流れを紹介し、その後それぞれのフィールドのバリデーションを確認する。 バリデーションの流れ vuetify rulesメールアドレスのフィールドを例にする template <v-form ref="form" v-model="valid" lazy-validation> <v-text-field v-model="email" :rules="emailRules" ></v-text-field> <v-btn class="mr-4" @click="submit">submit</v-btn> </v-form> script <script> export default { data: () => ({ valid: true, email: null, emailRules: [ value =>
Vuetify.js 2.2のGridSystemについて - Qiita
概要 GridSystemコンポーネントの初歩的な使い方のまとめです。 環境 Windows 10 Professional 1909 Node.js 12.14.1 Vue.js 2.6.11 Vuetify.js 2.2.15 参考 [Quick start - Vuetify.js] (https://vuetifyjs.com/en/getting-started/quick-start) [Components] (https://vuetifyjs.com/en/components/api-explorer) [A Complete Guide to Flexbox] (https://css-tricks.com/snippets/css/a-guide-to-flexbox/) [Grid system] (https://vuetifyjs.com/en/compone
【Vue/Vuetify】Vuetifyのv-text-fieldのclearableを有効にすると、削除時のmodelにはnullが挿入される - Ren's blog
VueのUIフレームワークVuetifyでは、テキストボックスである v-text-field に値削除ボタンを表示するオプションが clearable が指定できるのですが、この仕様が少し気になったのでメモします。 v-text-field に適当な文字列プロパティをバインドし、フォームの入力値とプロパティの値を連動させます。 <div id="app"> <v-app id="inspire"> <v-col cols="12" sm="6" md="3"> <v-text-field label="Clearable Form" v-model='text' clearable @input="inputed" ></v-text-field> </v-col> <v-col cols="12" sm="6" md="3"> <p>text: {{ text === null ? '
動画や画像ファイルのアップロード時に内容を表示する(Nuxt.js/Vuetify) - Qiita
<template> <v-row justify="center"> <v-col sm="12" md="11" lg="9" xl="6"> <v-sheet class="pa-3"> <h1>アップロードプレビューデモ</h1> <v-form ref="form"> <video v-if="uploadVideoUrl" controls> <source :src="uploadVideoUrl" /> このブラウザではビデオ表示がサポートされていません </video> <v-file-input v-model="input_video" accept="video/*" show-size label="動画ファイルをアップロードしてください" prepend-icon="mdi-video" @change="onVideoPicked" ></v-file-inp
Vuetifyのv-dialog内でスクロール位置を取得する - gyarasu
ダイアログを使用したとき、window.scrollYではダイアログ内のスクロール位置が取得できない
Vuetify.js 2.2のNavigation drawersコンポーネントについて - Qiita
<template> <v-app> <v-navigation-drawer app v-model="drawer"> <v-list-item> <v-list-item-title class="title"> Application </v-list-item-title> <v-btn icon> <v-icon>mdi-chevron-left</v-icon> </v-btn> </v-list-item> <v-divider /> <v-list nav> <v-list-item v-for="menu in menus" :key="menu.title" :to="menu.url"> <v-list-item-icon> <v-icon>{{ menu.icon }}</v-icon> </v-list-item-icon> <v-list-item-conte
Grid system — Vuetify
Vuetifyは、アプリケーションのブレークポイントをレイアウトおよび制御するための12分割されたマテリアルデザイングリッドをサポートしています。
Vuetify で v-text-field と v-btn のインライン化 - いろんなことで四苦Hack（仮）
結果的にこんな感じになった。 <div class="d-flex flex-row align-baseline"> <v-text-field ref="comment" label="Todo" outlined /> <v-btn class="ma-2 pa-2" outlined color="success"> Add </v-btn> </div> align-center をつけてたんだけど、一向に揃わないから試してたら、これが良さそうだった。参考画像でつ。 今日のtips 単方向参照 vue から、フォームにアクセスする際、片方向の参照だけしたい場合は、 <input type="text" ref="comment"> this.$ref.name.value が使える 昨日、今日は OS ができなかったのが残念だなぁ。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[ Java Script ] VuetifyのDataTableの列幅を指定する | 映像とその周辺
https://vuetifyjs.com/ja/components/simple-tables/
チェックボックス・コンポーネント — Vuetify
[Feature Request] Validate a single field · Issue #8698 · vuetifyjs/vuetify
Vuetifyでラジオボタン（v-radio）を横並びにする方法 - Qiita
Vuetifyのv-dialogのスクロール位置がリセットされない件に対応してみた - Qiita
Vue2 & Vuetify2でバリデーション付きのフォームを作ってみる - Qiita
Flex — Vuetify
【サンプルあり】Vuetify で DatePicker付きの テキストフィールドを作る！【v-date-picker】｜ProgLearn｜エンジニアのためのプログラミング情報メディア
Vue-cli, Vue-chart.js, Vuetifyの入門サイトまとめ - Qiita
Spacing — Vuetify