【Vue】動的にコンポーネントを切り替えたい場合(is属性)

2021年5月19日Vue.js

Vue.jsでv-forでループさせて、その中にコンポーネントも動的に切り替えたい場合のやり方を紹介します。
下の例では、tailwindcssでSVGアイコンを使った場合のアイコンコンポーネントをループしてそれぞれ適用させます。

コンポーネントをv-forでループさせる

template

<div class="card" v-for="(item, index) in items" :key="index">
  <img :src="`images/0-0${index+1}.jpg`" alt="" class="w-full h-32 sm:h-48 object-cover">
  <div class="m-4 self-start">
    <span class="font-bold">{{item.title}}</span>
    <span class="block text-gray-500 text-sm">{{item.subText}}</span>
  </div>
  <div class="badge">
    <span><component :is="item.icon" class="w-5 inline-block"/>{{item.tag}}</span>
  </div>
</div>

動的にコンポーネントを切り替えたい場合、is属性を使います。
componentタグを使って、is属性をv-bindすることでループしたアイテムにアクセスすることができます。

script

<script>
import { BeakerIcon } from '@heroicons/vue/solid'
import { UserIcon } from '@heroicons/vue/solid'
import { ClockIcon } from '@heroicons/vue/outline'
import {reactive} from 'vue'
export default {
  components: { BeakerIcon,ClockIcon, UserIcon },
  setup() {
    const items = reactive([
      {
      title: 'タイトル1',
      subText: 'サブテキスト1',
      tag: 'タグ',
      icon: 'BeakerIcon'
    },
      {
      title: 'タイトル2',
      subText: 'サブテキスト2',
      tag: 'タグ',
      icon: 'ClockIcon'
    },
      {
      title: 'タイトル3',
      subText: 'サブテキスト3',
      tag: 'タグ',
      icon: 'UserIcon'
    },
    ])

    return {
      items
    }
  }
}</script>

それぞれのiconがcomponentの部分に適用されます。