[nuxt3]propsで真偽値を渡して、分岐させる方法

トップ ― [nuxt3]propsで真偽値を渡して、分岐させる方法

投稿者 : TomoyaOkada

公開日:

更新日:

[nuxt3]propsで真偽値を渡して、分岐させる方法

Vue/Nuxt

目次

propsを使って受け取った真偽値を元に、v-ifを使って出し分けをする方法についてです。

コンポーネント側

<script setup lang="ts">
interface Props {
  className: string;
  arrowColor: boolean;
}

const Props = withDefaults(defineProps<Props>(), {
  className: "",
  arrowColor: true,
});

let colorFlag = ref<boolean>(Props.arrowColor);
</script>

<template>
    <span :class="className">
      <img src="@/assets/images/btn-arrow.svg" alt="" v-if="colorFlag" />
      <img src="@/assets/images/btn-arrow-black.svg" alt="" v-else />
    </span>
</template>


呼び出す側

<CommonLinkButton className="_button-blue" :arrowColor="true" />



記事をシェア

  • Twitter
  • FaceBook
  • hatena