V model on div tag component

Question

There was a problem using v-model to the div tag. Apparently, the div tag does not allow v-model and I decided to create my comments section as a component. For UI/UX reasons I need to allocate this div textarea as is. textarea, input and other tags, as far as I know, these tags are not compatible with contenteditable="true";; I need to expand when the user enters a comment The height of the input field. Below is the vue component I imported in the 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 import it and use v-model into it, like this.

<!--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>

But when I check the console it gives me the value "null" or nothing. Is there a way to solve this problem? Or maybe the way I implemented it is causing the problem.

EDIT: Here is the code running in codesandbox.

Answer 1

I solved your problem, the code is as follows. Hope this helps you

By adding @ in the div tag, we can see the change in the tag content in the change method. In this method, use emit$ to share its value with other components

<!-- CommentSection.vue -->
<template>
    <div id="chatId" @input="chanage" 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>

<script>
export default {
  methods: {
    chanage (e) {
      this.$emit('value-div', e.target.textContent)
    }
  }
}
</script>

<style>
#chatId[contenteditable="true"]:empty:not(:focus):before {
    content: attr(placeholder)
}
</style>

Here we have the props created by $emit, and we initialize its value in the comment variable. In fact, it has functions similar to v-model.

<!--MainPage.vue-->
<template>
...
...
     <CommentSection @value-div="(value)=>comment = value"/>
     <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>