はじめに
Vue.jsのUIコンポーネントライブラリであるVuetifyのうち、<v-avator>を使って色を動的に変更するサンプルを残します。
環境
OS: macOS Catalina 10.15.1
Vue: 2.6.10
vuex: 3.1.2
vuetify: 2.1.0
前提:<v-avator>とは？
Vuetifyが提供している、以下のようなアバターをお手軽に実装出来るコンポーネントです。
※画像は公式ドキュメントより拝借しました。
今回はこの<v-avator>を使って、中の文字列が
- 1 -> 黄色
- 2 -> 青
- 3 -> 緑
と、それぞれ背景色を変わるというサンプルコードを残します。
※Vuetifyのインストールがまだの方は、以下記事の後半等ご参照下さい。
【環境構築】Docker + Rails6 + Vue.js + Vuetifyの環境構築手順 - Qiita
結論：コード
子コンポーネント
シンプルに<v-avator>だけを表示するようにしています。
SampleChild.vue
<template>
<div>
<v-avatar
:color="avatorColor"
>
{{ displayName }}
</v-avatar>
</div>
</template>
<script>
export default {
name: 'SampleChild',
//propsでv-avator部分を親コンポーネント側で動的に変更出来るようにする
props: {
displayName: '',
avatorColor: '',
}
}
</script>
親コンポーネント
続いて親コンポーネントです。
v-forを使って、先程作成した子コンポーネントをnumbersという配列の要素数に応じて表示するようにしています。
SampleParent.vue
<template>
<div>
<!--配列numbersの要素数だけ表示する-->
<div v-for="number in numbers" :key="number.id">
<!--子コンポーネントがpropsで渡した２つの変数を親側で使用-->
<SampleChild
:avatorColor="color[number.name]"
:displayName="number.name"
>
</SampleChild>
</div>
</div>
</template>
<script>
import SampleChild from './SampleChild';
export default {
name: 'SampleParent',
components: {
SampleChild,
},
data() {
return {
//表示される配列
numbers: [
{id:1, name:1},
{id:2, name:2},
{id:3, name:3},
],
//number.nameに応じて変わる背景色
color: {
1: 'yellow',
2: 'blue',
3: 'green',
}
}
},
}
</script>
出力
無事、動的に背景色が変更されていることが確認出来ました！
確認：number.nを変更した場合の出力
以下のように変更してみます。
SampleParent
<template>
...略
</template>
<script>
//...略
data() {
return {
numbers: [
{id:1, n:2}, //ここのnを1->2へ変更
{id:2, n:2},
{id:3, n:3},
],
//...略
}
}
},
}
</script>
変更結果
無事、numbers.nに応じて背景色が変化してくれています！
この考えを応用すれば、特定のステータスの人だけアバターの背景色を変える、などの表示が可能となります。
おわりに
最後まで読んで頂きありがとうございました
どなたかの参考になれば幸いです