【Vue.js】Vuetifyのv-dialogの再利用性を高める
皆さんVuetify使ってますか？ 便利な上にかっこいいUIが作れるので最近私はハマっています。 今日はそんなVuetifyの<v-dialog>に焦点を当てていきたいと思います。 v-dialogは長い <v-dialog>を使ったことがある人ならご存知だと思いますが、これを実装しようとするとコードがかなり長くなります。 以下公式のドキュメントからの抜粋です。 <template> <v-row justify="center"> <v-btn color="primary" dark @click.stop="dialog = true" > Open Dialog </v-btn> <v-dialog v-model="dialog" max-width="290" > <v-card> <v-card-title class="headline">Use Google's loca
Vue.js 削除ボタンを作ってスロットを理解する - Qiita
スロットとは スロット(slot)は、Vue.jsにおける親コンポーネントから子コンポーネントにデータを渡す手段の一つです。 スロットという名前はハーデスやリゼロなど様々な機種がある遊技マシン...のことではなく「差し込み口」という意味で使われています。 つまり、コンポーネントに外からコンテンツの差し込みを受け付けるという目的で使用されます。 スロットはその性質上、再利用の高いコンポーネントによく使用されます。再利用の高いコンポーネントは、Atomic DesignにおけるAtomのようなものが代表されます。 まずはさっそくスロットの基礎的な使い方を見ていきましょう。 スロットコンテンツ スロットを使用コンポーネントとして、汎用的に利用する削除ボタンを実装します。 コンポーネントの内容は、Vuetifyのv-buttonをラップしただけ簡単なものです。 <template> <v-btn
【Vue.js】Vuetifyのv-data-tableでitemsをcomputedで取り扱いやすくすることについて - Qiita
<template> <v-data-table :headers="headers" :items="desserts" ></v-data-table> </template> Ajaxで受け取ったデータでdessertsを随時上書きするイメージで、そのデータが扱いにくいという状況です。 ケースに応じて調査してでてきたもの、力技でなんとかした対応を紹介します。 ケース1 チェックボックス(show-select)を使うとき、item-key用の一意のデータがない <template> <v-data-table v-model="selected" :headers="headers" :items="desserts" item-key="name" show-select ></v-data-table> </template> <script> export default {
【Vuetify】v-data-table で行クリックとチェックボックスのON/OFFを連動させる方法 - Qiita
概要 vuetifyのv-data-tableで、以下の３つの実装方法について説明します チェックボックスを表示し、かつ、行全体でクリック可能にする方法 選択中のチェックボックスの色を変更する方法 選択中の行全体の背景色を変更する方法 前提 Vue.js(2.x)、Vuetify、Vuetifyのv-data-tableを使用して表を表示 v-data-tableでは、single-selectを設定 必須ではないですが、自分が実装した際に後述の条件がそうしているため、その前提のコードになっています。 データ Vuetifyのv-data-tableのドキュメントにあるサンプルのデータ を利用 1. チェックボックスを表示し、かつ、行全体でクリック可能にする方法 @click:row にメソッドを指定し、後述methodsにあるように、第１引数で選択したアイテムのデータ（行データ）、第２引
Vuetify.js のデータテーブルで特定行のチェックボックスを表示しない - プログラムを書こう！
この記事は 2021 年 08 月 27 日に投稿しました。 目次 はじめに Vuetify.js のデータテーブルで特定行のチェックボックスを表示しない おわりに リンク 1. はじめに こんにちは、iOS のエディタアプリPWEditorの開発者の二俣です。 今回は業務で使用しているVuetify.jsのデータテーブルの特定行のチェックボックスを表示しない方法についてです。 目次へ 2. Vuetify.js のデータテーブルで特定行のチェックボックスを表示しない Vuetify.jsのデータテーブルの特定行のチェックボックスを表示しないには以下の様な実装にします。 実装例 <!DOCTYPE html> <html> <head> <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,70
Vuetify.js のデータテーブルでチェックボックスを使用する - プログラムを書こう！
この記事は 2021 年 02 月 04 日に投稿しました。 目次 はじめに Vuetify.js のデータテーブルでチェックボックスを使用する おわりに リンク 1. はじめに こんにちは、iOS のエディタアプリPWEditorの開発者の二俣です。 今回は業務で使用しているVuetify.jsのデータテーブルでチェックボックスを使用する方法についてです。 目次へ 2. Vuetify.js のデータテーブルでチェックボックスを使用する Vuetify.jsのデータテーブルでチェックボックスを使用するには、以下の様な実装にします。 実装例 <!DOCTYPE html> <html lang="ja"> <meta charset="utf-8" /> <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,4
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
バンドルファイルの分析(Vue.js, Nuxt.js) - わくわくBank
Webpack Bundle Analyzerを利用すると、バンドルサイズを可視化できます。可視化することで「容量の大きいモジュールの把握」「複数ページで共通モジュールを保持してないかの確認」といった分析がしやすくなります。 バンドルファイルの確認方法 Webpack Bundle Analyzer Webpack Bundle Analyzer を利用してバンドルファイルを分析できます。 Vue CLI で生成したプロジェクトや Nuxt.js であれば、すぐに利用できる状態になっています。 Vue CLIの場合 Vue CLI で生成したプロジェクトであれば、 yarn run build --report を実行すると、Webpack Bundle Analyzer によるレポートファイルも一緒に生成されます。 $ yarn run build --report yarn run v
Vuetify を使って困ったところ小ネタ集 - Neo's World
Vuetify を使って困ったところ小ネタ集 Vue CLI + TypeScript + SCSS + Vue-Router + Vuex なプロジェクトに、$ vue add vuetify で Vuetify を追加した。 Vuetify はマテリアルデザインを実現するフレームワークだが、細かなところでデザインを調整したい時に上手いやり方が分からないことがあり、ちょくちょく調べている。 今回はそんな、「ちょっとググッて調整した Vuetify 周りの小ネタ」を紹介する。 目次 Overlays 表示時に縦スクロールバーが消えて画面幅がズレるのがウザい scrollable な v-dialog の縦スクロールバーが見えたり消えたりするのがウザい v-list-item で省略せず折り返し表示させたい ページヘッダのタイトルにリンクを貼る v-text-field に required
VuetifyでQiita風UIを作る - チーム切り替えメニュー - Qiita
「VuetifyでQiita風のコンポーネントを作る」、今回はヘッダーのチーム切り替えメニュー編です。 目的やVuetifyの説明、他のコンポーネントについてはこちら チーム切り替えメニューとは ロゴの右側にある、下三角から開けるメニューのことです。(命名は勝手にしました。) Qiita:Teamに所属していない方にはあまり馴染みのないものかもしれませんが、 Qiita:Teamにログインしていると、このメニューから切り替えることができます。 実際のイメージはこのような感じです。 Qiita:Teamにログインしているとき Qiita:Teamにログインしていないとき Vuetifyで実装 まずはCodepenで作ったサンプルを紹介。 See the Pen Vuetify Qiita風Team切り替えメニュー by totto357 (@totto357) on CodePen. SFC
はじめてのVuetify(ログインページ作成で使い方学ぶ) | アールエフェクト
Vuetifyがどのようなものなのか確認するために、Vuefity公式ホームページにリンクされている動画を参考に動作確認を行なってみたいと思います。Vuetifyはマテリアルデザインを元に作られているので、デザイン性の優れたページを簡単に作成することができます。Vuefityが使いやすいかどうかは個人差があると思うので実際にログインページを作成しVuetifyがどういったものなのか確認してみましょう。 後半にはVue.jsとのVuetifyの連携も行っているのでVuetifyだけではなくVue.jsとの連携も学ぶことができます。 作成後のログイン画面 本文書ではvuetifyを使用して以下のログイン画面を作成します。 作成後のログイン画面 プロジェクトの作成 vueコマンドを使ってプロジェクトの作成を行います。名前は任意なのでここではvuetify-firstとしています。vue crea
Vuetify の Text-Field を使ったコンポーネントのユニットテスト
概要# Vuetify は Vue.js 用のコンポーネントフレームワークです。 今回はこの Vuetify のテキストフィールドを含むコンポーネントのユニットテストの書き方について紹介します。 題材となるコンポーネント# <script> export default { name: "ExampleInputForm", data() { return { word: "", }; }, }; </script> <template> <v-form> <v-text-field v-model="word"></v-text-field> <v-btn @click="$emit('submit', word)"></v-btn> </v-form> </template> 単純なテキストフィールドにボタンを用意しました。 テキストフィールドに入力された値はv-modelによってwo
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Nuxt 3 で Vuetify 3 を使う
v-dialogをコンポーネント化 - GitPress.io
【Nuxt.js】【Vuetify】v-dialogをコンポーネント化 | from umentu import stupid
https://vuetifyjs.com/ja/components/dialogs/
【Vuetify】ボタンコンポーネントを作成する方法｜エンジニアライフブック
https://vuetifyjs.com/ja/styles/colors/
Vuetifyでサイドメニューとハンバーガーメニューを作成する方法｜エンジニアライフブック