Vue 3 - Composition API - 動態添加帶有文本插值的模板

Question

我有一個帶有字符串屬性的組件，如下所示：

<script lang="ts" setup>

    const props = defineProps<{
        transcription?: string;
    }>();
    
     watch(() => props.transcription,
         (newTranscription) => {
             if (newTranscription) {
                 console.log(newTranscription);
                 // dynamically ad paragraph with text interpolation
                 // `<p> {{ newTranscription }} </p>`
             }
          }
     );

</script>
<template>
    <h1>Transcriptions</h1>
    ...here i want to append a paragraph every time transcription has text
</template>

每當屬性包含文本時，我想向顯示文本的模板添加一個“ <p> {{transcription}} </p> ”，並根據屬性內容進行更改。 append 必須是動態的。 任何建議將不勝感激

Answer 1

嘗試使用計算屬性：

<script lang="ts" setup>

    const props = defineProps<{
        transcription?: string;
    }>();
    
   const newTranscription = computed(() => {
             if (props.transcription) {
                 return props.transcription + "some dynamic content"
             }
     );

</script>

Answer 2

構建一個轉錄數組，例如：

<script lang="ts" setup>
    const transcriptions = [];

    const props = defineProps<{
        trascription?: string;
    }>();
    
     watch(() => props.trascription,
         (newTranscription) => {
             if (newTranscription) {
                 console.log(newTranscription);
                 //dynamically ad paragraph with text interpolation
                 transcriptions.push(newTranscription);
             }
          }
     );

</script>

並在模板中使用v-for ：

<p v-for="transcr in transcriptions" :key="transcr">{{transcr}}</p>

請注意，密鑰應該是唯一的，而在上面的示例中可能並非如此。