【Vuetify】<v-avator>を使って背景色を動的に変更するサンプル

10598 ワード
Vuetify 初心者 Vue.js Vuex 初心者 テキストリンク

はじめに

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>とは？

Avatar component — Vuetify.js

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に応じて背景色が変化してくれています！

この考えを応用すれば、特定のステータスの人だけアバターの背景色を変える、などの表示が可能となります。

おわりに

最後まで読んで頂きありがとうございました

どなたかの参考になれば幸いです

参考にさせて頂いたサイト（いつもありがとうございます）