Encountering an issue with using v-model on div elements. It seems that div tags do not support v-model, prompting me to create a separate comment section component. I opted to use this div text area for better UI/UX design. Traditional form input tags like textarea or input are incompatible with contenteditable="true", which is why I needed to dynamically adjust the input field height as users input their comments. Below is the Vue component imported into my parent view.
<!-- CommentSection.vue -->
<template>
<div id="chatId" contenteditable="true" placeholder="Leave a message" class="overflow-hidden block mx-4 text-left p-2.5 w-full text-sm text-gray-900 bg-white rounded-2xl border border-gray-300 focus:ring-blue-500 focus:border-blue-500"/>
</template>
<style>
#chatId[contenteditable="true"]:empty:not(:focus):before {
content: attr(placeholder)
}
</style>
In my view file, I imported and utilized it with v-model, similar to the following example.
<!--MainPage.vue-->
<template>
...
...
<CommentSection v-model="comment"/>
<button @click="submitPost()"> Submit </button>
...
...
...
</template>
<script>
import CommentSection from '@/components/CommentSection.vue'
export default{
name: 'MainPage',
data(){
return{
comment: '',
}
},
components: { CommentSection },
methods:{
submitPost(){
console.log(this.comment);
},
},
}
</script>
However, upon checking the console, it returns "null" or nothing. Is there a solution to rectify this issue? Or could it be an error in implementation?
EDIT: Here's the live code on codesandbox.