概要 Vuetifyのv-data-tableに画像の表示させる方法があまり見つからなかったためここで共有しようと思います。vuetifyのサンプルコードを元に画像を表示していきます。 おまけとして画像ホバー時にメニューボタンを表示する機能も紹介しています。 環境 vue 2.6.14 vuetify 2.6.2 npm: 7.21.1 node: 14.17.5 実装 vuetifyのインストール vue add vuetify npm run serveで起動し、下の画面が出てきたら準備は完了です。 詳しい方法は以下のリンクで説明されています。 v-data-tableの準備 v-data-tableはvuetifyで使用できるAPIです。今回はこれのカスタム変更機能を利用し、画像を表示していきます。 まず、土台となるテーブルを作成します。HelloWorld.vueを以下のように変更します。 HelloWorld.vue <template> <v-data-table :headers="headers" :items="desserts" :items-per-page="5" class="elevation-1 my-3 mx-auto" style="width:1000px;" ></v-data-table> </template> <script> export default { name: 'HelloWorld', data () { return { headers: [ { text: 'サムネイル予定', align: 'start', sortable: false, value: 'thumbnail', width: "30%", }, { text: '名前', value: 'name', width: "30%", }, { text: '体重', value: 'fat', width: "40%", }, ], desserts: [ { thumbnail: 'https://cdn.pixabay.com/photo/2021/09/22/05/06/city-6645646_960_720.jpg', name: 'yoko', fat: 6.0 }, { thumbnail:'https://cdn.pixabay.com/photo/2021/12/19/14/36/bird-6881277_960_720.jpg', name: 'tae', fat: 9.0, }, { thumbnail:'https://cdn.pixabay.com/photo/2021/12/03/21/22/kastoria-6843842_960_720.jpg', name: 'taro', fat: 16.0, }, { thumbnail:'https://cdn.pixabay.com/photo/2021/10/09/05/33/cosmos-6693008_960_720.jpg', name: 'bonbon', fat: 3.7, }, { thumbnail:'https://cdn.pixabay.com/photo/2021/10/02/07/40/ink-6674441_960_720.jpg', name: 'sampleMan', fat: 16.0, }, { thumbnail:'https://cdn.pixabay.com/photo/2021/11/14/07/28/background-6793549_960_720.jpg', name: 'samppleWoman', fat: 0.0, }, { thumbnail:'https://cdn.pixabay.com/photo/2020/11/27/06/58/cat-5781057_960_720.jpg', name: 'justin', fat: 0.2, }, ], } }, } </script> 上手く作成できると以下のようなテーブルができます。ただ、サムネイルの部分がURLのままです。 画像の表示 v-data-tableの部分を以下のように変更します。 まず、<template v-slot:item.thumbnail="{ item }" >でサムネイルのコラムを変更できます。そのタグの中でv-imgで実際に画像を表示します。 高さや幅はv-imgのheightやwidthを変更して調節が可能です。 <v-data-table :headers="headers" :items="desserts" :items-per-page="5" class="elevation-1 my-3 mx-auto" style="width:1000px;" > <!-- サムネイル --> <template v-slot:item.thumbnail="{ item }" > <v-img :src="item.thumbnail" :aspect-ratop="16/9" height="9vw" min-height="100px" width="16vw" min-width="160px" class="ma-0 pa-0" ></v-img> </template> </v-data-table> 結果 以下のようなテーブルが表示されていれば成功です。 おまけ(ホバー表示機能) 今回のように画像を表示するだけでもいいですが、画像ホバー時にボタンを出現させる機能も追加したいと思います。 見た目としては以下のようになります。 ホバー時 ボタンを押したとき 実装 まず、画像表示の部分をコンポーネント化した、TableThumbnail.vueを作成します。それに合わせてHelloWorld.vueも変更します。 HelloWorld.vue <template> <v-data-table :headers="headers" :items="desserts" :items-per-page="5" class="elevation-1 my-3 mx-auto" style="width:1000px;" > <!-- サムネイル --> <template v-slot:item.thumbnail="{ item }" > 　　　<!-- ここを変更 --> <TableThumbnail :item="item" /> </template> </v-data-table> </template> <script> import TableThumbnail from "./TableThumbnail.vue" export default { name: 'HelloWorld', components:{TableThumbnail}, //追加 data () { return { headers: [ { text: 'サムネイル予定', align: 'start', sortable: false, value: 'thumbnail', width: "30%", }, { text: '名前', value: 'name', width: "30%", }, { text: '体重', value: 'fat', width: "40%", }, ], desserts: [ { thumbnail: 'https://cdn.pixabay.com/photo/2021/09/22/05/06/city-6645646_960_720.jpg', name: 'yoko', fat: 6.0 }, { thumbnail:'https://cdn.pixabay.com/photo/2021/12/19/14/36/bird-6881277_960_720.jpg', name: 'tae', fat: 9.0, }, { thumbnail:'https://cdn.pixabay.com/photo/2021/12/03/21/22/kastoria-6843842_960_720.jpg', name: 'taro', fat: 16.0, }, { thumbnail:'https://cdn.pixabay.com/photo/2021/10/09/05/33/cosmos-6693008_960_720.jpg', name: 'bonbon', fat: 3.7, }, { thumbnail:'https://cdn.pixabay.com/photo/2021/10/02/07/40/ink-6674441_960_720.jpg', name: 'sampleMan', fat: 16.0, }, { thumbnail:'https://cdn.pixabay.com/photo/2021/11/14/07/28/background-6793549_960_720.jpg', name: 'samppleWoman', fat: 0.0, }, { thumbnail:'https://cdn.pixabay.com/photo/2020/11/27/06/58/cat-5781057_960_720.jpg', name: 'justin', fat: 0.2, }, ], } }, } </script> TableThumbnail.vue <template> <div > <v-hover v-slot="{ hover }"> <v-card justify-center class=" my-1 rounded-sm" > <template> <div class="text-right pr-2 pt-2 " style="position:absolute ; z-index:99; width:100%;"> <v-menu left offset-y :nudge-width="200" > <template v-slot:activator="{ on, attrs }"> <v-btn elevation=4 small icon v-bind="attrs" :ripple="false" v-on="on" fab dense color="gray" :class="(hover & $vuetify.breakpoint.smAndUp) ? 'ma-0 pa-0 menu-color on-hover-img':'on-hover-img' " > <v-icon class="ma-0 pa-0" color="white"> mdi-menu </v-icon> </v-btn> </template> <v-list> <v-list-item dense btn @click="displayName(item)"> <v-list-item-icon> <v-icon>mdi-image</v-icon> </v-list-item-icon> <v-list-item-title> アイテムの詳細</v-list-item-title> </v-list-item> </v-list> </v-menu> </div> </template> <v-img :src=" item.thumbnail " :alt="item.name " :aspect-ratop="16/9" height="9vw" min-height="100px" width="16vw" min-width="160px" class="ma-0 pa-0" ></v-img> </v-card> </v-hover> </div> </template> <script> export default { name: 'TableThumbnail', props:['item'], methods : { displayName(item){ window.alert(item.name) } } } </script> <style scoped> .on-hover-img { transition: opacity .1s ease-in-out; opacity: 0; } .menu-color{ opacity: 1; background-color: rgba(0, 0, 0, 0.265) !important; } </style> 概要 HelloWorld.vue HelloWorld.vueの変更点はv-imgをコンポーネント化したのでそれに付随する変更のみです。 <!-- サムネイル --> <template v-slot:item.thumbnail="{ item }" > <!-- ここを変更 --> <TableThumbnail :item="item" /> </template> </v-data-table> </template> <script> import TableThumbnail from "./TableThumbnail.vue" export default { name: 'HelloWorld', components:{TableThumbnail}, ///省略 TableThumbnail.vue 構成としては v-hover v-card v-menu v-btn v-list v-img というような構造をとっています。 v-hoverによってv-btnのクラスを切り替えてボタンの表示・非表示を操作します。そのため、ホバー時のcssクラスを作成しておく必要があります。 v-btnをクリックするとv-menu中身のv-listを表示するという形になっています。 :class="hover ? 'ma-0 pa-0 menu-color ':'on-hover-img' " まとめ 今回はvuetifyのテーブルv-data-tableでの画像表示とその他の機能について説明しました。何かご指摘等あれがコメントお願いします。 参考 Vuetify v-data-table 画像の引用元pixabay javascript:データテーブルの行に画像を表示したい

Laravel側のディレクティブや変数をVueのコンポーネントの中に入れたいときはslotを使う。 ↓こんな感じ（必要な個所以外は省略しています） blade側 <side-menu> @auth <ul class="side-menu-inner"> <li><a href='{{ route("users.show", ["uid" => Auth::user()->uid]) }}'>マイページ</a></li> <li><a href='{{ route("users.info") }}'>通知</a></li> @endauth @guest <ul class="side-menu-inner"> <li><a href=''>新規登録</a></li> <li><a href="">ログイン</a></li> </ul> @endguest </side-menu> SideMenu.vue <template> <div> <slot></slot> </div> </template>

jQueryのslideToggleは数行で実装できるので便利でした。 今回、数行とはいきませんがそれなりにシンプルなコードでslideToggleの動きを再現してみました。 生jsの場合 See the Pen accrodion without jQuery by monji (@monji88) on CodePen. e.targetとnextElementSiblingを使用しています。 e.targetについてはこちらの記事にも書かせて頂いてます。 https://qiita.com/monji586/items/711bc6d78c41cf02c752 Vue.jsの場合 See the Pen Untitled by monji (@monji88) on CodePen. Vueなのでtransitionタグなど使おうかとも思いましたが、 普通に生jsのコードを使いまわしたほうがシンプルでした。 el:"#app"とかはVue2の書き方ですがmethodsの部分はVue3でもそのまま使えると思います。 Reactの場合 すみませんReactは触ったことないのでコードを用意してません。 でも生jsのコードを転用してもらえれば動くと思います。

背景 自分が作業する環境でULIDをJavascript(Vue.js)で使用する機会が出てきたため、調べたところ記事もそんなに出てないし、投稿しようと思いました。 環境 ulidx 0.3.0 vue 2.6.14 実装方法 関連するライブラリをインストール ulidx 今回使用するライブラリはulidxです。npmにはulidというライブラリがあるんですが、長くメンテナンスがされていないようです。そのulidを元にしつつ、機能を拡張させたものがulidxになります。今回はこのulidxの使い方を紹介していきます。 　インストール npm install ulidx 使い方 ulidの作成 ulidxをインポートします。以下のコードはulidの作成をしています。 import { ulid } from "ulidx"; createULID(){ let ulidCreated = ulid(); // 01FT83PSC9VD2BB77H1M0K5P2A let ulidSeed = ulid(100); //シードを指定してULIDを作成 //0000000034WMEBWSY2JZC947HD }, 単調増加するulidの作成 monotonicFactoryは単調増加するULIDを作成できます。 import { monotonicFactory } from "ulidx"; monoULID(){ let ulidMono = monotonicFactory(); let ulidM1 = ulidMono(150000); //0000004JFGTT02CT60BNH4SDCR let ulidM2 = ulidMono(150000); //0000004JFGTT02CT60BNH4SDCS let ulidM3 = ulidMono(150000); //0000004JFGTT02CT60BNH4SDCT } ulidからUNIX時間に変換 ULIDをUNIXに変換します。 import { decodeTime } from "ulidx"; decodeULID(){ let Unix = decodeTime("01FT850VYMMNZR7CNMTZZCD90V"); //1643098697684 //UNIXから日本時間に変換 let date = new Date(Unix) console.log(date.toString()) //Tue Jan 25 2022 17:18:17 GMT+0900 (日本標準時) } サンプルコード HelloWorld.vue <template> <div class="hello"> <ul style="margin:0 auto 0 auto; width:600px; text-right"> <li>normal create:{{ulidCreated}}</li> <li>seed create:{{ulidSeed}}</li> <li>mono create1:{{ulidM1}}</li> <li>mono create2:{{ulidM2}}</li> <li>mono create3:{{ulidM3}}</li> <li>decode(UNIX):{{ulidDecoded}}</li> </ul> </div> </template> <script> import { ulid,monotonicFactory,decodeTime } from "ulidx"; export default { name: 'HelloWorld', data: () => ({ ulidCreated:null, ulidDecoded:null, ulidSeed:null, ulidM1:null, ulidM2:null, ulidM3:null }), mounted(){ this.createULID(); this.seedULID(); this.monoULID(); this.decodeULID(); }, methods:{ createULID(){ this.ulidCreated = ulid(); }, seedULID(){ this.ulidSeed = ulid(100); }, monoULID(){ let ulidMono = monotonicFactory(); this.ulidM1 = ulidMono(150000); this.ulidM2 = ulidMono(150000); this.ulidM3 = ulidMono(150000); }, decodeULID(){ this.ulidDecoded = decodeTime("01FT850VYMMNZR7CNMTZZCD90V"); let date = new Date( this.ulidDecoded) console.log(date.toString()) } } } </script> まとめ 今回はVueでのULIDの取り扱い方法について書きました。何かご指摘等あれば、ぜひコメントをください！ 参考 ulidxのドキュメントページ JavaScriptでunixtimeから日時へ変換するやり方のメモ

概要 最近react,vueを触る機会が多いので、メモするほどのことでもないのですが、 初心者やreact,vueってどんな感じなの？って人用に書かせてもらいます。 (シリーズ化して、小出しに記事にしていくかも？) vueでの条件によって表示させる方法 vueでは表示したい要素のタグの属性にv-ifを追加することで 要素を表示するか、しないかを表現できます。 <template> <div> <span v-if="flag">表示されます</span> <span v-else>表示されません</span> </div> </template> <script> export default { data() { return { flag: true } } } </script> vueでの出しわけ方法は分かりやすく、 タグにv-if="~~"というディレクティブ(※)を追加することで、簡単に出しわけができます。 もちろん、v-else-ifも使えます。 ※ DOM要素に対して何かを実行することをvue側に伝えるものと覚えておくといいかもしれないです。 jsxでの条件によって表示させる方法 jsxの場合は以下になります。 const flag = true; return ( <div> {flag && <span>表示されます</span>} // or {flag ? <span>表示されます</span> : <span>表示されない</span>} </div> ) jsxの場合は{}を記述して、中に条件を書くことでタグの出しわけができます。 flagの管理などはstateと呼ばれるものを使用したりしますが、それはまた別の機会に。

※初学者が書いています。おかしな部分などありましたら教えて頂けると嬉しいです※ 環境：Vue2・Vue3 Vue.jsでtransitionタグやtransition-groupタグを使用してアニメーションを実装する場合、 CSSのクラスを使用する方法とJavaScriptフックを使用する方法がある。 1.CSSクラスを使用する場合 Vueが用意してくれているcssクラスを使用する。多分こちらのほうが一般的。 詳細は公式を確認お願いします。 https://v3.ja.vuejs.org/guide/transitions-overview.html 2.Jsフックを使用する場合 Vueが用意してくれている関数等を使用する。 詳細は公式を確認お願いします。 https://v3.ja.vuejs.org/guide/transitions-enterleave.html#javascript-%E3%83%95%E3%83%83%E3%82%AF どちらを使えばいいか 単純にCSSだけを使用するなら"1.CSSクラスを使用する場合"を使用すれば良いが もし「getBoundingClientRect()を使用して要素の高さを取得してからその数値を元に処理したい」など jsの関数を使った処理が必要になる場合はjsフックを使ったほうがシンプルに実装できそう。