【Vuetify】를 사용하여 배경색을 동적으로 변경하는 샘플

소개

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에 따라 배경색이 변화하고 있습니다!



이 아이디어를 적용하면 특정 상태의 사람만 아바타의 배경색을 바꾸는 등의 표시가 가능합니다.

결론

끝까지 읽어 주셔서 감사합니다

누군가의 도움이 되길 바랍니다

참고로 한 사이트 (항상 감사합니다)

Avatar component — Vuetify.js