One of the components in my project is the Form Answer component:
<template>
<div class="flex flex-col items-center justify-center gap-2">
<!-- <p class="font-semibold">{{ ansLabel }}</p> -->
<div
class="flex items-center justify-center gap-5 rounded-3xl border-2 border-gray-300 p-5 shadow-md"
>
<textarea class="w-[700px]" :placeholder="ansPlaceholder"> </textarea>
<input type="checkbox" name="isTrue" id="" />
</div>
</div>
</template>
<script setup>
// eslint-disable-next-line no-unused-vars
const props = defineProps({
ansPlaceholder: {
type: String,
default: 'default'
}
})
</script>
<style scoped></style>
Here's how I implement this component:
<template>
<div
name="form container"
class="mx-2 flex w-[70%] flex-col items-center rounded-3xl border-2 border-black p-3"
>
<div
name="question"
class="flex w-fit flex-col items-center justify-center gap-3 border-2 border-blue-500 p-3"
>
<p class="font-semibold">Question</p>
<textarea placeholder="Add a question"></textarea>
</div>
<div name="answers" class="flex w-fit flex-col gap-5 border-2 border-green-500 p-3">
<FormAnswer ansPlaceholder="Answer A"></FormAnswer>
<FormAnswer ansPlaceholder="Answer B"></FormAnswer>
<FormAnswer ansPlaceholder="Answer C"></FormAnswer>
<FormAnswer ansPlaceholder="Answer D"></FormAnswer>
<FormAnswer ansPlaceholder="Answer E"></FormAnswer>
</div>
</div>
</template>
<script setup>
import FormAnswer from '../AdminDashboardCmp/FormAnswer.vue'
</script>
<style scoped></style>
However, I encountered an issue with the placeholder not rendering properly as expected. When the page loads, the placeholders for textareas are missing. They only appear after inputting and deleting some text. How can I ensure that the placeholders are visible when the form initially renders?
I attempted to resolve this by adding reactive data and a watcher, but so far it has not been successful.