Model V pada komponen tag div

Question

Menggunakan v-model 到 div 标记时出现问题。显然， div 标签不允许 v-model ，我决定将我的评论部分创建为组件。由于 UI/UX 原因，我需要按原样分配此 div 文本区域。 textarea、input 等标签，据我所知，这些标签与 contenteditable="true"; tidak serasi; Saya memerlukan ketinggian medan input untuk berkembang apabila pengguna memasukkan ulasan. Di bawah ialah komponen vue yang saya import dalam paparan induk.

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

Dalam fail paparan saya, saya mengimportnya dan menggunakan v-model ke dalamnya, seperti ini.

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

Tetapi apabila saya menyemak konsol ia memberi saya nilai "null" atau tiada. Adakah terdapat cara untuk menyelesaikan masalah ini? Atau mungkin cara saya melaksanakannya menyebabkan masalah.

EDIT: Berikut ialah kod yang dijalankan dalam codesandbox.

Answer 1

Saya menyelesaikan masalah anda, kodnya adalah seperti berikut. Semoga ia membantu anda

Dengan menambah @ dalam tag div, kita boleh melihat perubahan kandungan tag dalam kaedah perubahan. Dalam kaedah ini, gunakan emit$ untuk berkongsi nilainya dengan komponen lain

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

Di sini kami mempunyai prop yang dicipta oleh $emit dan kami memulakan nilainya dalam pembolehubah ulasan. Malah, ia mempunyai fungsi yang serupa dengan model v.

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