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 =>
reireias portfolio
Options 1 Options 2 Options 3 Options 4 Options 5 Options 6 Options 7 Options 8 Options 9 Options 10 Options 11 Options 12 Options 13 Options 14 Options 15 Options 16 Options 17 Options 18 Options 19 Options 20 Options 21 Options 22 Options 23 Options 24 Options 25
BASEのVue.jsコンポーネントの設計について登壇してきました - BASEプロダクトチームブログ
前書き フロントエンドエンジニアの松原(@simezi9)です。 先日10月30日にクラウドワークスさんをお借りして実施したVue.jsの設計勉強会である、Vue.jsアーキテクチャリング勉強会 にて、 BASEの現在のVueコンポーネントの設計に関して登壇してお話してきました。 全体の資料はこちらです もともとBASEではVue.js+TSを採用した大規模なシステムのリニューアルプロジェクトが2018年からスタートしていました。それにあたっての大まかなフロントエンドの構築方針は以前もblogや外部登壇で発表していました。 次世代の管理画面を作るフロントエンドの取り組み - BASE開発チームブログ 次の5年を支えるVue.js製UIコンポーネントライブラリを育てる これまでの発表では大枠の技術スタックやワークフローの話が多かったですが、 今回はVueコンポーネントの設計が勉強会の主眼にあ
Upgrading to Vuetify 2.0 in a existing Nuxt.js project | 名古屋のシステム・ウェブ開発・株式会社ウェブネーション
There are two ways to add Vuetify 2.0 in a existing Nuxt project. With a plugin With a Nuxt.js module I tried to add it with the nuxt module but couldn’t do it, so rolled with plugin. So I am going to explain what I did so you can use the new features too. It’s cooler now 😉 . The Plugin Way First, Install Vuetify 2.0.0 npm install vuetify@2.0.0 // OR yarn add vuetify@2.0.0 Vuetify uses Material D
[Documentation] v-slot:activator="{ on }" · Issue #6866 · vuetifyjs/vuetify
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community. Pick a username Email Address Password Sign up for GitHub By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails. Already on GitHub? Sign in to your account
![[Documentation] v-slot:activator="{ on }" · Issue #6866 · vuetifyjs/vuetify](https://cdn-ak-scissors.b.st-hatena.com/image/square/3715f9cc39daa8806d816e97b5ace0de7af37954/height=288;version=1;width=512/https%3A%2F%2Fopengraph.githubassets.com%2F8c70e780486700f968e3aac4dd51d979ba43e7b6fc521f4b17ff86570339aee5%2Fvuetifyjs%2Fvuetify%2Fissues%2F6866)
Vuetify の checkbox を v-model を使わずに実装する
v-model は汎用性が低い v-model は一見便利そうに見えますし、Vuetify のコード例にもたくさん出てきますが、v-model は汎用性が低いので、大型アプリケーションにおいては使う機会が非常に少ないと思います。特に Vuex 等の state 管理用のライブラリを使用している場合にこれは顕著です。 v-model を使わない方法は？ v-model は一般的には :value="something" @input="handler" のシュガーシンタックスだと言われています。ただ、ドキュメントでもあまりはっきりしないのですが、実際には必ずしもそうではありません。 Vuetify の checkbox の場合は？ https://vuetifyjs.com/en/components/selection-controls Veutify の checkbox は :valu
Vuetifyチュートリアル。CSSを書かないマテリアルデザイン
フロントエンド 52124 view Vuetifyチュートリアル。CSSを書かないマテリアルデザイン 最終更新日:2019/03/23 VuetifyとはVue.jsで使える、マテリアルデザインのフレームワークです。 Vuetifyにはマージンの調整、文字サイズの変更等デザインをする上で便利なクラスや、マテリアル。 マテリアルにまつわるオプションがデフォルトで備わっています。 マテリアルやオプションを使いこなすと、凝ったレイアウトでなければ、CSSを書くことなくデザインをすることが可能です。 今回は、以下のようなよくある会員登録フォームをVuetifyでCSSを使わずに実装していきましょう！ Vuetifyの環境構築はこちらでまとめておいたので、環境がない方はこちらから初めてください。 Vuetifyが便利すぎる【マテリアルデザイン3分入門】 Vuetifyでマテリアルデザインをする流れ
Vueでもっと幸せになりたいあなたへ。VueのUIコンポーネントライブラリVuetifyのススメ - KAYAC engineers' blog
どうもみなさまおはようございます。あるいはこんにちは。あるいはこんばんは。 KAYAC Advent Calendar 2018の12日目の記事を担当します、今年1月に中途入社しましたエンジニアのたがみです。 前職ではサーバーサイドのSEとして業務系のwebアプリを開発したり運用したりしていましたが、今はクライアントワークのフロントのエンジニアとしてwebサイトを作ったり動かしたりぶっ飛んだものにしたりしなかったりしています。 今回は、そんな私がフロントエンドになったばかりの頃に仲良くなった思い入れのある言語、Google App Scriptの話を！・・・・・・と、つい二日前までは、思っていたのですが。 Google先生を訪ねて色々と検索していたところ「あれ・・・なんか・・・Vuetifyについての日本語記事、実は少ないのでは・・・？」と気づいてしまったのです。 （もしかしたら気のせいか
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【サンプルあり】Vuetify で DatePicker付きの テキストフィールドを作る！【v-date-picker】｜ProgLearn｜エンジニアのためのプログラミング情報メディア
ネコチャで使用している技術まとめ(Rails, Vue, Nuxt) - 学生ブロックチェーンエンジニアのブログ
Vuetifyの使い方：実践の前に覚えておいた方がいいこと｜たのしいWeb
Icons - Material Design
https://vuetifyjs.com/ja/getting-started/quick-start/