【 Nuxt 】v-cardを横並びにした際にテキストやボタン位置に統一性をもたらす - Qiita
<v-row> <v-col v-for="(item, i) in items" :key="i" class="d-flex" cols="12" sm="6" md="6" lg="4" > <v-card outlined max-width="100%" height="100%" class="d-flex flex-column" > <v-img :src="item.img" style="max-height:214px" height="214px" /> <v-card-title class="justify-center" v-text="item.title" /> <v-card-text :style="'font-size:0.9rem'" height="100%" v-html="item.text" /> <v-spacer /> <v-card-
【Vue.js】window.confirmを自前で作る - Qiita
window.confirmと似た使用感の確認ダイアログを自作しました。 ## 確認バージョン * vue: 2.6.11 * vuetify: 2.3.2 ## 使用例 以下のように、コンポーネントごとにmixinを読み込んで使います。 文字列の配列を渡すと、複数行のメッセージとして表示される仕組みになっています。 <template> <div class="container"> <h2>氏名変更</h2> <v-btn small class="button primary" @click="changeName">実行</v-btn> </div> </template> <script lang="ts"> import Vue from 'vue'; import ConfirmDialogMixin from '@/mixins/ConfirmDialogMixin.ts'
Vuetifyのv-text-fieldでtype="number"の時に、表示されている値を変更する - Qiita
こんにちは！ 長らくプレーンJavaScriptガリゴリマンでしたが、最近仕事の関係でVue.jsを触り始めた和尚でございます それでは早速見ていきましょう！ 環境 Vue.js v2.6.11 Vuex v3.4.0 Vuetify v2.2.11 注意 ※かなりパワープレイです。参考程度に見てください。 本日の議題 ある昼下がりのこと Aさん「数値しか入れられないフォームに文字が入っちゃうんだけど、どうにかならない？あと、最大値が999のはずなのに、キーボードで入力すると1000以上入っちゃうからついでに直して...」 和尚「まじっすかー。ちょっと調べてみまーす！」 ... 今回の要件における Input type="number" の困った仕様 最大値と最小値はキーボード入力で超えることが可能 safariは文字列を入力すると自動削除されない chromeは指数表現のe・Eが入力でき
【Vue.js】Vuetifyのv-tabsをscript側から制御する - Qiita
概要 以下、Vue.jsのUIライブラリであるVuetifyの話です。 v-dialogにv-tabsを組み込んでいてv-dialogの表示非表示を変更した際、v-tabsは必ず1番目のものを表示する仕様にしたかった時のメモ。 つまるところv-tabsにおけるv-modelについてです。 v-tabsのマニュアルをソースまで見れば書かれているのですが、見出しや説明文からは判断がつかないのが曲者でした。 方法 <template> <v-tabs v-model="model"> <v-tab href="#tab-1">タブ1</v-tab> <v-tab href="#tab-2">タブ2</v-tab> <v-tab href="#tab-3">タブ3</v-tab> </v-tabs> <v-tabs-items v-model="model"> <v-tab-item value=
Vuetify.js 2.2のApp Barsコンポーネントについて - Qiita
概要 App Barsコンポーネントの初歩的な使い方のまとめです。 環境 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) [Styles - Colors] (https://vuetifyjs.com/en/styles/colors) [Material Design Icons] (https://cdn.materialdesignicons.com/4.5.95/) [App Bar
Vuetifyで、APIから選択肢を検索して呼び出せるドロップダウンリストをつくる - Qiita
APIから選択肢を検索して呼び出せるドロップダウンリスト こういうドロップダウンリストを作りたいとき、ありますよね。 プロトタイピングなどでさくっと実装したいと思っても、一から自分で作るとなると苦しい要素が満載ですが、Vuetifyを使ってみたらあっという間で感動しました。 コードはこちら https://codepen.io/kokky/pen/eQwvZM?editors=1010 そもそもVuetifyとは マテリアルデザインを採用したvue.jsのUIコンポーネント集です。Bootstrapのマテリアルデザイン版。かゆいところに手が届く！つよい！ 今回利用するのは、Vuetifyのautocomplete componentです。導入・ドキュメントはこちらから。日本語版だと、なぜかドキュメントの説明が表示されないので、英語版でアクセスしてください。 https://vuetifyj
Vuetify.js のスニペット集 | knooto
このページは、Vuetify.js のスニペットをまとめる予定のページです。 目次 注意 コードのライセンスは CC0 (クレジット表示不要、改変可、商用可) です。 Nuxt.js + TypeScript で使用するためのスニペットになっていることが多いです。 Nuxt.js v2.12.2 時点のコードです。将来のバージョンでは動作しない可能性があります。 スニペット 日本語設定 Nuxt.js (プラグイン) plugins/vuetify.ts import Vue from 'vue' import Vuetify from 'vuetify' Vue.use(Vuetify) import ja from 'vuetify/src/locale/ja' export default new Vuetify({ lang: { locales: { ja }, current:
【Nuxt.js】会員登録フォームを構築してサインアップページを完成させる - 独学プログラマ
2019.12.02に公開 2020.01.05に更新 SPA開発 8. ログイン周りのレイアウト設計 No.4 / 4 「SPA開発」では、Nuxt.js v2.14未満が使用されています。 Nuxt.jsはv2.13~14で大きなバージョンアップがありました。それに伴い、書き方も大きく変化しています。 v2.14以上で書かれた「SPA開発」の続編は、カテゴリー「 Udemy 」 で公開しています。 今回達成すること 今回は、前回のコンポーネント設計に従って、会員登録ページ（signup.vue）を完成させます。 最終的にこのようになります。↓ 完成イメージ 作業に入る前に 今回の記事は全てNuxt.js上での作業となります。 ターミナルは、Rails内のNuxt.jsプロジェクト（筆者の場合、myapp/frontend）に移動しておいてください。 froutend $ # ここに移動
VuetifyのDataTableとPaginationの状態をVuexで管理する | Takumon Blog
なにこれ VuetifyのDataTableとPaginationを使った検索一覧画面でページングの状態を、ルーティングをまたいで保存しておきたい。という要望を満たすため、ページングの状態をVuexで管理する方法をメモします。 DataTableだけだとすんなりできますが、Paginationもあわせて使う場合は少し雑な実装になってしまいます。 やり方 まずはストアに以下のように定義します。 アクションには「ページングオブジェクト保存」と「ページングオブジェクトのページのみ保存」の2種類を用意します。 export default new Vuex.Store({ state: { pagination: { page: 1, rowsPerPage: 20, sortBy: 'id', descending: false, }, }, getter: { getPagination: s
vue.js+vuetifyでページネーション - Qiita
概要 ページネーションを作成してみようと調べたのでメモしておく。 とりあえず、ページネーションに専念したいので、データの取得等は省略します。 また、vuetify自体のインストールは、別途下記ページで記述しているので省略します。 Vuetifyをインストールして使ってみる プラグイン作成 共通処理を使い回せるようにプラグインにしておく。 計算関連やページネーションの情報は、このプラグインに集約しておく。 const Pagination = { install (Vue, options) { const store = new Vue({ data: { current : 0, // 現在のページ番号 visible : 7, // ページネーションのリンクに表示するページ数 total : 0, // ページの総数 rows : 0, // データの総数 rows_per_page
【vue.js】 Vuetifyで簡単ページネーション(Paginations) | アールエフェクト
Vuetifyのコンポーネントを利用すると見栄えのいいページネーションを簡単に設置することができます。Vuetifyのマニュアルには、v-paginationコンポーネントによるページネーションのタグは記述されていますが、どのようにvue.js上で設定を行い動作させるかについては説明はありません。 本文書では、最も簡単だと思われる方法でVuetifyのページネーションの設定方法を詳細に説明しています。Vuetifyのページネーションに興味がある人はぜひ参考にしてみてください。 vue.jsとVuetifyの環境について 本文書ではページネーションに焦点を当てているので、vue.jsとVuetifyの環境構築手順については説明を行なっていません。下記の文書の前半部分を参考に環境構築を行なってください。またVuefityの設定方法についても説明を行なっています。 ページネーションの設定 Vue
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
VuetifyのCSSを上書きしたいときに取りうる選択肢 - Qiita
【Vue】tableの要素を選択可能にする方法。クリックに合わせclass属性を付与する - Qiita
子コンポーネントのデザインオプションを親コンポーネントから切り替える[Vue.js, Vuetify] - Qiita![子コンポーネントのデザインオプションを親コンポーネントから切り替える[Vue.js, Vuetify] - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/e2a1d7d53b461c423f7622b0d29263ef90ae241e/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnMzLWFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkZxaWl0YS1pbWFnZS1zdG9yZSUyRjAlMkYzNTI1MzIlMkYyNzA3MGU3ZGRmZGE0YzlmZWNhMjEyYjY5MjkyODY2YTIzNjU2M2NlJTJGeF9sYXJnZS5wbmclM0YxNjcyNzQwMzQxP2l4bGliPXJiLTQuMC4wJmFyPTElM0ExJmZpdD1jcm9wJm1hc2s9ZWxsaXBzZSZmbT1wbmczMiZzPTRjYTdlZmU2N2FlNzNlNGYyM2M1ZTU2MTUyNmQwNDhm%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D71b37e4b71645992b23650d24635c8c7%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JUU1JUFEJTkwJUUzJTgyJUIzJUUzJTgzJUIzJUUzJTgzJTlEJUUzJTgzJUJDJUUzJTgzJThEJUUzJTgzJUIzJUUzJTgzJTg4JUUzJTgxJUFFJUUzJTgzJTg3JUUzJTgyJUI2JUUzJTgyJUE0JUUzJTgzJUIzJUUzJTgyJUFBJUUzJTgzJTk3JUUzJTgyJUI3JUUzJTgzJUE3JUUzJTgzJUIzJUUzJTgyJTkyJUU4JUE2JUFBJUUzJTgyJUIzJUUzJTgzJUIzJUUzJTgzJTlEJUUzJTgzJUJDJUUzJTgzJThEJUUzJTgzJUIzJUUzJTgzJTg4JUUzJTgxJThCJUUzJTgyJTg5JUU1JTg4JTg3JUUzJTgyJThBJUU2JTlCJUJGJUUzJTgxJTg4JUUzJTgyJThCJTVCVnVlLmpzJTJDJTIwVnVldGlmeSU1RCZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1wYWQ9MCZzPTM5YmQzNGMyMWNhNmQ4MjE2NzkxMGE0M2EwMWEzZjI2%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBha2k0MDAzJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LXBhZD0wJnM9YWRjODhiYzUwYmI5NDdmN2NmOTBmYWE5MzFhZjIxYmQ%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3Dd46e66fe708e2e1d3f0cdf8724df580d)
Vuetify でフィルタリング機能付きセレクトボックスを実装する - Qiita
Vuetifyでタイトルを中心に持ってきたい - Qiita
なんとなくVue.jsのUIフレームワークを紹介する - Qiita
FullCalendar-Vueでカレンダーにイベントを追加する方法がややこしかった話 - Qiita
Vuetify と Vue Router でレスポンシブなナビゲーションを作ってみました - Qiita