I have created a form component consisting of two components. The first component looks like this:
<template>
<div class="flex flex-col items-center justify-center gap-2">
<div class="flex w-[80%] items-center justify-center gap-2 rounded-3xl p-2">
<textarea class="w-full" :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>
Then, I import and use it in the following way:
<template>
<div
name="form container"
class="mx-auto flex w-[70%] flex-col items-center justify-center rounded-3xl border-2 border-black"
>
<div name="question" class="flex w-[80%] flex-col items-center justify-center gap-3 p-3">
<p class="text-2xl font-semibold">Question</p>
<textarea class="w-[80%]" placeholder="Add a question" v-model="question"></textarea>
</div>
<div name="border" class="mx-auto w-[50%] rounded-3xl border-2 border-gray-400"></div>
<div name="answers" class="flex w-[80%] flex-col gap-2 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>
<select>
<option value="">Database 1</option>
<option value="">Database 2</option>
</select>
<button
class="mx-auto mt-2 w-fit rounded-3xl border-2 border-black p-3 text-xl font-semibold transition-all duration-500 hover:scale-105 hover:bg-black hover:text-white"
@click="getFormData()"
>
Submit question
</button>
</div>
</div>
</template>
<script setup>
import FormAnswer from '../AdminDashboardCmp/FormAnswer.vue'
import { ref } from 'vue'
const question = ref('')
const ansE = ref('')
function getFormData() {
console.log(ansE.value)
const fullQuestion = {
title: question.value,
answers: []
}
}
</script>
<style scoped></style>
When using the tag:
<FormAnswer ansPlaceholder="Answer E"></FormAnswer>
I am unable to use v-model on it to retrieve the value from the textarea. How can I access the value of a textarea within a component?
What is the simplest way to achieve this? I am not necessarily looking for the shortest solution, but rather a step-by-step approach. Thank you in advance!