【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のslotの機能を初心者にわかるように解説してみた | フューチャー技術ブログ
はじめにはじめまして。2017年入社の永井です。 東郷さんによる「Vue.js最初の難関、「props down, event up」を初心者にわかるように解説してみた」はご覧になられましたでしょうか？おそらくVue.js最初の難関は無事乗り越えられたと思います！ 今回は「Vue.js初心者にわかるように解説してみた」第二弾として、props down,event up と同様に親子関係が肝となる、「slot」について、初心者に向けて説明していきたいと思います。 slotとはslotとは親となるコンポーネント側から、子のコンポーネントのテンプレートの一部を差し込む機能 です。 スロットというと「スロットマシン」が思い浮かびますが、もともとslotの「差し込み口」という意味から派生して、コインの投入口があるスロットマシンの意味をもつようになったそうです。 以下では大きく3つ、デフォルトのsl
はじめてのVuetify(ログインページ作成で使い方学ぶ) | アールエフェクト
Vuetifyがどのようなものなのか確認するために、Vuefity公式ホームページにリンクされている動画を参考に動作確認を行なってみたいと思います。Vuetifyはマテリアルデザインを元に作られているので、デザイン性の優れたページを簡単に作成することができます。Vuefityが使いやすいかどうかは個人差があると思うので実際にログインページを作成しVuetifyがどういったものなのか確認してみましょう。 後半にはVue.jsとのVuetifyの連携も行っているのでVuetifyだけではなくVue.jsとの連携も学ぶことができます。 作成後のログイン画面 本文書ではvuetifyを使用して以下のログイン画面を作成します。 作成後のログイン画面 プロジェクトの作成 vueコマンドを使ってプロジェクトの作成を行います。名前は任意なのでここではvuetify-firstとしています。vue crea
Vuetify2を使ったプロジェクトのビルドが遅いので高速化する - Qiita
Vuetify+Vue CLIで構築したプロジェクトで、 Vuetify2.xにアップグレードしたらnpm run serveの開始時間が著しく長くなってしまったので改善します。 原因 Vuetify2.0よりデフォルトで有効となったA-la-carte(treeshaking)が原因です。 A-la-carteとは Vuetifyの数多くのコンポーネントのうち、「プログラム中で使われているもの」だけを成果物に含める機能です。使っていないコンポーネントをimportしないので、ビルドサイズが減少します。 しかしながら、これはビルド時間を増大させます。 A-la-carteを使わない場合、vuetifyの全てのコンポーネントはnode_modules/vuetify/dist/vuetify.min.jsから読み込まれます。これは既にimportの解決やminifyが済んでいるプリコンパイル
Nuxt.jsでcomponentsフォルダのVueコンポーネントを自動でimportする - Qiita
Nuxt.js のコンポーネント Nuxt.js は、ソースファイルのフォルダ構造を決めてくれるので、整理が楽でいいですよね。 Vue コンポーネントは、 components フォルダに置くルールになっていますが、 自動で読み込んでくれるわけではありません。 例えば、 components フォルダがこんな構造であった場合： $ tree components/ components/ ├── Logo.vue ├── README.md ├── VuetifyLogo.vue └── app └── welcome └── MessageBoard.vue 2 directories, 4 files <template> <app-welcome-message-board> <div>今日はいい天気ですね！</div> </app-welcome-message-board> </
Vue.jsで再利用可能なタブのUIコンポーネントを実装する方法を解説
タブは、Webサイトやスマホアプリでよく使用されるUIコンポーネントです。TailwindCSSやBootstrapなどのライブラリにも必ずありますが、再利用可能な柔軟性のあるものではありません。 スタイルを簡単にカスタマイズできる再利用可能なタブコンポーネントをVue.jsで実装する方法を紹介します。 How to Build a Tab Component In Vue.js by Luca Spezzano 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 実装の概要 AppTabs.vueコンポーネントの作成 コードの解説 コンポーネントの使用方法 終わりに はじめに タブはUIでよく使用されるコンポーネントの1つで、Bootstrapのような人気のあるCSSフレームワークやTailwindUIのようなUIコンポ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
v-dialogをコンポーネント化 - GitPress.io
【Nuxt.js】【Vuetify】v-dialogをコンポーネント化 | from umentu import stupid
【Vue】親子間コンポーネントでデータ通信する方法について - とあるプログラミングのレシピ集
DockerでVue.jsの環境を作るまでの手順
Docker+VuejsでTODOリストを作る | システム・アプリ・ゲームUnity｜オルターボ株式会社
【Vuetify】ボタンコンポーネントを作成する方法｜エンジニアライフブック
Firebase Authentication(v9)とVueで認証機能を実装する
Veturを入れてるのにコード補完が効かない - Qiita
VSCODE上でVeturの警告が出ていたので解決した
【Nuxt.js】グローバルなコンポーネントの設定 - Qiita