[Vue]template内で三項演算子を使用して表示するコンポーネントを変更したい

Question

聞きたいこと

下のようにtemplate内で三項演算子を使用して、表示されるアイコンを切り替えたいと思っています。

<template>
  <div>
    {{ emotion ? <smile-icon /> : <bad-icon /> }}
  </div>
</template>

<script lang="ts">
import { defineComponent, SetupContext, computed } from '@vue/composition-api';

export default defineComponent({
  components: {
    SmileIcon: () =>
      import('@/assets/icons/smile.svg?inline'),
    BadIcon: () => import('@/assets/icons/bad.svg?inline'),
  },
  props: {
    emotion: {
      type: Boolean,
      required: true,
    },
  },
});
</script>

ただ、expression expected といったエラーが表示されてしまいます。

参考にしたコード

https://github.com/vuejs/vue-hackernews-2.0/blob/98399b55c6f1da4197840ba76189795b3e95be0f/src/components/Comment.vue#L9-L14

上のように三項演算子に右辺に文字列を指定すると問題なく動作するのですが、コンポーネントを指定したいと思っています。

Answer 1

component要素とis属性 を用いて，template部分を次のように書くと良いと思います。

<template>
  <div>
    <component b-bind:is="emotion ? SmileIcon : BadIcon" />
  </div>
</template>