【 Nuxt 】v-cardを横並びにした際にテキストやボタン位置に統一性をもたらす - Qiita
はじめに Nuxt（Vue）で本記事のような内容は見受けられなかったので、皆さんのお役に立てれば幸いです。 また、本記事はVuetifyを使用しています。 では、さっそく内容に迫っていきましょう。 最終イメージ スタート <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="it
VuetifyのCSSを上書きしたいときに取りうる選択肢 - Qiita
VuetifyのCSSは強い 基本的にいじらなくてもいい感じにきれいにできるという意味と、overrideしようとすると若干面倒くさいという二重の意味で強いVuetifyのCSSですが、変更したい場合があり思うところがあったので、こんなときにはこの方針でという備忘録 そのコンポーネントでしか使わない scoped styleを使用して、あげれば事足りる。要素に対して直接Styleを付けなければここが最後に読み込まれるので、あるコンポーネントでしか使わないようなクラスがあればここに書いてあげればそれでいい <style scoped lang="sass"> .wrap-text word-break: break-all white-space: normal </style> 複数のVuetify標準コンポーネントに適応したい この場合都度Scoped styleに持ってくるのは面倒なの
【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'; export d
子コンポーネントのデザインオプションを親コンポーネントから切り替える[Vue.js, Vuetify] - Qiita
子コンポーネントのデザインオプションを親コンポーネントから切り替える[Vue.js, Vuetify]Vue.jsVuetify Vuetifyのデザインコンポーネントはとても便利で、オプションをちょっと書くだけでUIのデザインや機能まで簡単にカスタマイズできます。 さらに、少し工夫するだけで親コンポーネントからもオプション類を操作できるため、その手順をまとめます。 やりたいこと こんな感じで、バレーボールのポジションを選択するv-selectだけのコンポーネントを作ります。 （なぜバレーボールなのかは無視してください） <template> <v-select prepend-icon=" mdi-volleyball " :items="positionList" label="ポジション" ></v-select> </template> <script> export defaul
![子コンポーネントのデザインオプションを親コンポーネントから切り替える[Vue.js, Vuetify] - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/f0f9ca27938363c89f76395594222ea7be67f8e8/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JUU1JUFEJTkwJUUzJTgyJUIzJUUzJTgzJUIzJUUzJTgzJTlEJUUzJTgzJUJDJUUzJTgzJThEJUUzJTgzJUIzJUUzJTgzJTg4JUUzJTgxJUFFJUUzJTgzJTg3JUUzJTgyJUI2JUUzJTgyJUE0JUUzJTgzJUIzJUUzJTgyJUFBJUUzJTgzJTk3JUUzJTgyJUI3JUUzJTgzJUE3JUUzJTgzJUIzJUUzJTgyJTkyJUU4JUE2JUFBJUUzJTgyJUIzJUUzJTgzJUIzJUUzJTgzJTlEJUUzJTgzJUJDJUUzJTgzJThEJUUzJTgzJUIzJUUzJTgzJTg4JUUzJTgxJThCJUUzJTgyJTg5JUU1JTg4JTg3JUUzJTgyJThBJUU2JTlCJUJGJUUzJTgxJTg4JUUzJTgyJThCJTVCVnVlLmpzJTJDJTIwVnVldGlmeSU1RCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9ZDEwNjBkMjM5YzVmYzIwYWY4NTQ0OGE4MmEyODM3Yzc%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBha2k0MDAzJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz02YjkzMTgxMGZkNjYxM2ZiNTMyZDY3Mjc5MzhkMzczYg%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D31420a72adf5fa8c57422ea122a3fc47)
Vuetifyでタイトルを中心に持ってきたい - Qiita
<template> <v-app> <v-app-bar> <Title class="mx-auto"/> <Menu class="ml-n15"/> //数字(15)の部分は各自調整してください </v-app-bar> </v-app> </template> まずTitleにつけた class="mx-auto"は 横方向のマージンを自動で調整してくれるものです。 そしてMenuにつけた class="ml-n15"で 左側のマージンを15削りました。 n15の「n」というのはネガティブの意味で、 今あるマージンからその後につけた数字分だけ削ることができるものです。 n15の「15」の部分を各自調整すると以下のように上手くタイトルを中心に持ってくることができます。
Vuetifyのv-text-fieldでtype="number"の時に、表示されている値を変更する - Qiita
Vuetifyのv-text-fieldでtype="number"の時に、表示されている値を変更するJavaScriptVue.jsVuexVuetify こんにちは！ 長らくプレーンJavaScriptガリゴリマンでしたが、最近仕事の関係でVue.jsを触り始めた和尚でございます それでは早速見ていきましょう！ 環境 Vue.js v2.6.11 Vuex v3.4.0 Vuetify v2.2.11 注意 ※かなりパワープレイです。参考程度に見てください。 本日の議題 ある昼下がりのこと Aさん「数値しか入れられないフォームに文字が入っちゃうんだけど、どうにかならない？あと、最大値が999のはずなのに、キーボードで入力すると1000以上入っちゃうからついでに直して...」 和尚「まじっすかー。ちょっと調べてみまーす！」 ... 今回の要件における Input type="number
【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
<v-app dark> <v-app-bar dark> <v-app-bar-nav-icon /> <v-toolbar-title>Title</v-toolbar-title> <v-spacer /> <v-btn icon> <v-icon>mdi-home</v-icon> </v-btn> <v-btn icon> <v-icon>mdi-magnify</v-icon> </v-btn> <v-btn icon> <v-icon>mdi-account</v-icon> </v-btn> <v-btn icon> <v-icon>mdi-dots-vertical</v-icon> </v-btn> </v-app-bar> <v-content> <router-view /> </v-content> </v-app> light lightプロパティでライトテーマ
Vuetifyで、APIから選択肢を検索して呼び出せるドロップダウンリストをつくる - Qiita
こういうドロップダウンリストを作りたいとき、ありますよね。 プロトタイピングなどでさくっと実装したいと思っても、一から自分で作るとなると苦しい要素が満載ですが、Vuetifyを使ってみたらあっという間で感動しました。 コードはこちら https://codepen.io/kokky/pen/eQwvZM?editors=1010 そもそもVuetifyとは マテリアルデザインを採用したvue.jsのUIコンポーネント集です。Bootstrapのマテリアルデザイン版。かゆいところに手が届く！つよい！ 今回利用するのは、Vuetifyのautocomplete componentです。導入・ドキュメントはこちらから。日本語版だと、なぜかドキュメントの説明が表示されないので、英語版でアクセスしてください。 https://vuetifyjs.com/en/components/autocompl
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ページを開く
【Vue】tableの要素を選択可能にする方法。クリックに合わせclass属性を付与する - Qiita
Vuetify でフィルタリング機能付きセレクトボックスを実装する - Qiita
なんとなくVue.jsのUIフレームワークを紹介する - Qiita
FullCalendar-Vueでカレンダーにイベントを追加する方法がややこしかった話 - Qiita
Vuetify と Vue Router でレスポンシブなナビゲーションを作ってみました - Qiita