I have a Component that requires a string property, as shown below:
<script lang="ts" setup>
const props = defineProps<{
transcription?: string;
}>();
watch(() => props.transcription,
(newTranscription) => {
if (newTranscription) {
console.log(newTranscription);
// dynamically add a paragraph with text interpolation
// `<p> {{ newTranscription }} </p>`
}
}
);
</script>
<template>
<h1>Transcriptions</h1>
...here I want to dynamically append a paragraph each time the transcription property has text
</template>
When the property contains text, I wish to include a "
<p> {{transcription}} </p>
" in the template to display the text and update based on the property content. The appending should be done dynamically.
Any suggestions are highly appreciated