[B! vuetify] kathewのブックマーク

Vuetifyでv-text-fieldの中の文字をセンタリングする方法 - Qiita

<v-row row justify-center align-center> <v-col xs12 class="d-flex justify-center"> <v-text-field label="code" v-model="barcodeValue" class="centered-input" :hide-details="true" :change="changeWidth()" placeholder="input code" /> </v-col> </v-row>

kathew 2021/03/23

vuetify

リンク

Vuetifyでのバリデーションまとめ - inokawablog

Vuefityでのバリデーションをまとめる。最初にバリデーションの一連の流れを紹介し、その後それぞれのフィールドのバリデーションを確認する。バリデーションの流れ vuetify rulesメールアドレスのフィールドを例にする template <v-form ref="form" v-model="valid" lazy-validation> <v-text-field v-model="em ail" :rules="em ailRules" ></v-text-field> <v-btn class="mr-4" @click="submit">submit</v-btn> </v-form> script <script> export default { data: () => ({ valid: true, em ail: null, em ailRules: [ value =>

kathew 2021/03/23

リンク

[ Java Script ] VuetifyのDataTableの列幅を指定する | 映像とその周辺

data() { return { headers: [ { text: "ColA", value: "cola", width: "10%" }, { text: "ColB", value: "colb", width: "80%" }, { text: "ColC", value: "cols", width: "10%" }, ], } }

kathew 2021/03/22

vuetify
tips

リンク

https://vuetifyjs.com/ja/components/simple-tables/

kathew 2021/03/11

リンク

https://vuetifyjs.com/ja/components/checkboxes/

kathew 2021/03/04

リンク

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 Components A Complete Guide to Flexbox Grid system Vuetify.jsのグリッドはCSS フレックスボックスレイアウトを使用した12ポイントのグリッドシステムで、Bootstrapのグリッドシステムの影響を受けています。基本的なコンポーネントの構造 Vuetify.jsのグリッドは主に3つのコンポーネント(v-container、v-row、v-col)とv-spacerで構築します。

kathew 2021/02/10

vuetify

リンク

【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 ? '

kathew 2020/11/17

vue
vuetify

リンク

[Feature Request] Validate a single field · Issue #8698 · vuetifyjs/vuetify

kathew 2020/11/15

リンク

Vuetifyでラジオボタン（v-radio）を横並びにする方法 - Qiita

Vuetifyのラジオボタン(v-radio)を横並びにしたい。 →propsに row を指定すればOK まず、普通に書くと以下の画像のように縦並びになります <v-radio-group> <v-radio label="はい" value="radio-1"></v-radio> <v-radio label="どちらでもない" value="radio-2"></v-radio> <v-radio label="いいえ" value="radio-3"></v-radio> </v-radio-group> ↓ どうにかこれを横並びにしたかったのですが、「Vuetify ラジオボタン横」などのバカっぽい検索を繰り返してもなかなか情報が出てきませんでした。 Vuetifyを使わない素のラジオボタンなら、「インライン要素にせよ」などの情報が出てきますがいろいろ試すも一生縦のまま。

kathew 2020/10/31

リンク

動画や画像ファイルのアップロード時に内容を表示する(Nuxt.js/Vuetify) - Qiita

概要 Web アプリケーションでファイルアップロードを実装する際にファイルの内容を表示したい。適用イメージサンプルソース Nuxt.js で Vuetify の File inputs コンポーネントを使っているファイル選択時にファイルの内容をData URL としてバインディングしているアップロードするファイルのサイズが大きすぎるとダメかもしれない <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" /> このブラウザで

kathew 2020/10/30

リンク

Vuetifyのv-dialogのスクロール位置がリセットされない件に対応してみた - Qiita

利用規約などスクロールが必要なコンテンツをv-dialogに書くと、スクロール位置がリセットされない件に対応してみました(Vuetify v1.5対応) まずはこちらに対応したv-dialogを用意 https://scrapbox.io/gyarasu/Vuetify%E3%81%AEv-dialog%E5%86%85%E3%81%A7%E3%82%B9%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%AB%E4%BD%8D%E7%BD%AE%E3%82%92%E5%8F%96%E5%BE%97%E3%81%99%E3%82%8B dialogコンポーネントが開いた後に実行するメソッドなどに下記の方法でscrollTopを指定すればスクロール位置がリセットされます。 let i = document.getElementById('scroll-target') i.a

kathew 2020/10/29

リンク

Vuetifyのv-dialog内でスクロール位置を取得する - gyarasu

ダイアログを使用したとき、window.scrollYではダイアログ内のスクロール位置が取得できない

kathew 2020/10/29

自分のケースでは何かがバッティングしてこの方法でうまくいかなかったけど、v-dialogのcontent-classに動的にユニークなクラスを付与してdocument.elementsByClassName()で拾ったらうまくスクロール位置が取れた

vuetify
tips

リンク

Vue2 & Vuetify2でバリデーション付きのフォームを作ってみる - Qiita

この記事は、Vue2.x 版です。Vue3.x での内容をご覧になりたい方は、「Vue3 & Vuetify3でバリデーション付きのフォームを作ってみる」の記事をご覧ください。 VueとVuetifyを組み合わせて、下図キャプチャのようなバリデーション付きのフォームを作ってみます。Vueの基本事項は知っている前提です。だいぶ回りくどい記事になっています。バージョン Vue 2.6.10 Vuetify 2.1.1 STEP0: ベースデモ表示されない場合はこちら→ Vue & Vuetifyでのバリデーション付きフォーム STEP:0 解説以下のコードをベースにします。 <div id="app"> <v-app> <v-card> <v-card-title>STEP:0 フォーム</v-card-title> <v-card-text> <v-text-field v-mode

kathew 2020/10/29

リンク

Flex — Vuetify

kathew 2020/10/18

css
vuetify

リンク

【サンプルあり】Vuetify で DatePicker付きのテキストフィールドを作る！【v-date-picker】｜ProgLearn｜エンジニアのためのプログラミング情報メディア

kathew 2020/10/12

リンク

Vuetify.js 2.2のNavigation drawersコンポーネントについて - Qiita

value : コンポーネントを表示するか非表示にするかを制御します。実装例ドロワーはVuetifyアプリケーションの一部（v-appコンポーネントに組み込み、v-navigation-drawerコンポーネントのappプロパティを指定する）として利用するほかに、アプリケーションとは別に単体で利用することもできます。以下の実装例の動作結果は、Vuetifyアプリケーションの一部として実装したものになります。 <template> <v-app> <v-navigation-drawer app v-model="drawer"> <v-list-it em> <v-list-it em-title class="title"> Application </v-list-it em-title> <v-btn icon> <v-icon>mdi-chevron-left</v-icon> <

kathew 2020/10/05

vuetify

リンク

Vue-cli, Vue-chart.js, Vuetifyの入門サイトまとめ - Qiita

環境：Windows 10 pro Vue.js関連を理解するのに役に立ったサイトをまとめました。 Node.js環境が構築されているかを確認下記のように、"バージョン"が表示されない場合、Node.jsをインストールする必要があります Node.jsをダウンロード Windows版 Node.js環境構築方法まとめを参考にダウンロードする Vue-cliを理解する VueCLIからVue.js入門①【VueCLIで出てくるファイルを概要図で理解】 VueCLIからVue.js入門 ②【トグル機能作成からVue.jsの基本的な機能を掴む】を参考に理解する Vue-chart.jsを理解する Creating Beautiful Charts Using Vue.js Wrappers for Chart.js (上記の翻訳版)Vue.jsでカッコいいグラフを手軽に作るChart.js

kathew 2020/10/05

vue
vuetify

リンク

https://vuetifyjs.com/ja/components/grids/

kathew 2020/09/10

リンク

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 ができなかったのが残念だなぁ。