【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
はじめてのVuetify(ログインページ作成で使い方学ぶ) | アールエフェクト
Vuetifyがどのようなものなのか確認するために、Vuefity公式ホームページにリンクされている動画を参考に動作確認を行なってみたいと思います。Vuetifyはマテリアルデザインを元に作られているので、デザイン性の優れたページを簡単に作成することができます。Vuefityが使いやすいかどうかは個人差があると思うので実際にログインページを作成しVuetifyがどういったものなのか確認してみましょう。 後半にはVue.jsとのVuetifyの連携も行っているのでVuetifyだけではなくVue.jsとの連携も学ぶことができます。 作成後のログイン画面 本文書ではvuetifyを使用して以下のログイン画面を作成します。 作成後のログイン画面 プロジェクトの作成 vueコマンドを使ってプロジェクトの作成を行います。名前は任意なのでここではvuetify-firstとしています。vue crea
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
v-dialogをコンポーネント化 - GitPress.io
【Nuxt.js】【Vuetify】v-dialogをコンポーネント化 | from umentu import stupid
【Vuetify】ボタンコンポーネントを作成する方法｜エンジニアライフブック