L'utilisation de v-model 到 div 标记时出现问题。显然， div 标签不允许 v-model ，我决定将我的评论部分创建为组件。由于 UI/UX 原因，我需要按原样分配此 div 文本区域。 textarea、input 等标签，据我所知，这些标签与 contenteditable="true"; n'est pas compatible ; j'ai besoin que la hauteur du champ de saisie s'agrandisse lorsque l'utilisateur saisit un commentaire. Vous trouverez ci-dessous le composant vue que j'ai importé dans la vue parent.
<!-- 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>
Dans mon fichier de vue, je l'ai importé et utilisé v-model dedans, comme ça.
<!--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>
Mais quand je vérifie la console elle me donne la valeur "null" ou rien. Existe-t-il un moyen de résoudre ce problème ? Ou peut-être que la façon dont je l'ai implémenté est à l'origine du problème.
EDIT : Voici le code exécuté dans codesandbox.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
J'ai résolu votre problème, le code est le suivant. J'espère que cela vous aidera
En ajoutant @ dans la balise div, nous pouvons voir le changement du contenu de la balise dans la méthode de changement. Dans cette méthode, utilisez submit$ pour partager sa valeur avec d'autres composants
<!-- 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>Ici nous avons les props créés par $emit et nous initialisons sa valeur dans la variable de commentaire. En fait, il a des fonctions similaires au 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>