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 =>
概要 GridSystemコンポーネントの初歩的な使い方のまとめです。 環境 Windows 10 Professional 1909 Node.js 12.14.1 Vue.js 2.6.11 Vuetify.js 2.2.15 参考 Quick start - Vuetify.js Components A Complete Guide to Flexbox Grid system Vuetify.jsのグリッドはCSS フレックスボックスレイアウトを使用した12ポイントのグリッドシステムで、Bootstrapのグリッドシステムの影響を受けています。 基本的なコンポーネントの構造 Vuetify.jsのグリッドは主に3つのコンポーネント(v-container、v-row、v-col)とv-spacerで構築します。
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 ? '
<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
ダイアログを使用したとき、window.scrollYではダイアログ内のスクロール位置が取得できない
<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
Vuetifyは、アプリケーションのブレークポイントをレイアウトおよび制御するための12分割されたマテリアルデザイングリッドをサポートしています。
結果的にこんな感じになった。 <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ページを開く
