■コンポーネント
----------------------------
煩雑な書き方
----------------------------
<template v-if="typeof titles === 'string'">
{{ titles }}
</template>
<template v-else>
<span
v-for="title in titles"
:key="title"
:class="$style.SheetBase__title"
>
{{ title }}
</span>
</template>
----------------------------
ソースが煩雑にならない書き方をする
----------------------------
<span
v-for="computedText in computedTexts"
:key="computedText"
:class="$style.HeadingBase__text"
>
{{ computedText }}
</span>
-----------------
computedTexts() {
return Array.isArray(this.text) ? this.text : this.text.split();
}
-----------------
props: {
text: {
type: [String, Array],
required: true
},
}
------------------------------
■ページ側
computed: {
nextChargeYM(): string {
return "";
},
successBottomSheetTitle(): any {
if (
this.showSts === STATEMENT_SHOW_STS.TEMPORARY_FIXED
) {
return ["完了しました", "次のステップへ進んでください"];
} else {
return "完了しました";
}
}
},
<EndPointCollection
:title="successBottomSheetTitle"
>
