Die Verwendung von v-model 到 div 标记时出现问题。显然， div 标签不允许 v-model ，我决定将我的评论部分创建为组件。由于 UI/UX 原因，我需要按原样分配此 div 文本区域。 textarea、input 等标签，据我所知，这些标签与 contenteditable="true" ist nicht kompatibel. Ich muss die Höhe des Eingabefelds erweitern, wenn der Benutzer einen Kommentar eingibt. Unten ist die Vue-Komponente, die ich in die übergeordnete Ansicht importiert habe.

<!-- 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 meiner Ansichtsdatei habe ich es importiert und v-model wie folgt darin verwendet.

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

Aber wenn ich die Konsole überprüfe, wird mir der Wert „null“ oder nichts angezeigt. Gibt es eine Möglichkeit, dieses Problem zu lösen? Oder vielleicht ist die Art und Weise, wie ich es implementiert habe, die Ursache des Problems.

EDIT: Hier ist der Code, der in codesandbox ausgeführt wird.