Creating a Vue form to ask a question involves making a component:
<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"
:value="modelValue"
@input="$emit('update:modelValue', $event.target.value)"
></textarea>
<input
type="checkbox"
:value="checkboxValue"
name="isTrue"
@change="$emit('update:checkboxValue', $event.target.value)"
/>
</div>
</div>
</template>
<script setup>
// eslint-disable-next-line no-unused-vars
const props = defineProps({
ansPlaceholder: {
type: String,
default: 'default'
},
modelValue: {
type: String
},
checkboxValue: {
type: Boolean
}
})
defineEmits(['update:modelValue', 'update:checkboxValue'])
// eslint-disable-next-line no-unused-vars
</script>
<style scoped></style>
Then, there is the main component:
<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"
v-model:modelValue="answers[0]"
v-model:checkboxValue="isTrue[0]"
></FormAnswer>
<FormAnswer
ansPlaceholder="Answer B"
v-model:modelValue="answers[1]"
v-model:checkboxValue="isTrue[1]"
></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 answers = []
const isTrue = ref('')
function getFormData() {
console.log(answers)
}
</script>
<style scoped></style
The objective is to log the answer as an object { answer:'lorem ipsum', isTrue: false } and if the checkbox is clicked, { answer:'lorem ipsum', isTrue: true}. However, passing boolean as a prop seems to be an issue.
<textarea
class="w-full"
:placeholder="ansPlaceholder"
:value="modelValue"
@input="$emit('update:modelValue', $event.target.value)"
></textarea>
Followed by
const props = defineProps({
ansPlaceholder: {
type: String,
default: 'default'
},
modelValue: {
type: String
},
defineEmits(['update:modelValue', 'update:checkboxValue'])
and then
<FormAnswer
ansPlaceholder="Answer A"
v-model:modelValue="answers[0]"
v-model:checkboxValue="isTrue[0]"
></FormAnswer>
While it worked for passing text, encountering issues with passing boolean. How can this be resolved?