Hay un problema al usar v-model para etiquetas div . Aparentemente, las etiquetas div no permiten v-model y he decidido crear mi sección de comentarios como un componente. Necesitaba asignar esta área de texto div tal como está debido a razones de UI/UX. etiquetas textarea , input , etc., que yo sepa, estas etiquetas no son compatibles con contenteditable="true" ; Necesito expandir la altura del campo de entrada a medida que un usuario escribe sus comentarios. A continuación se muestra el componente vue que importé en mi vue principal.
<!-- 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>
En mi archivo de vue, lo importé y usé v-model en él, así.
<!--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>
Sin embargo, cuando reviso mi consola, me da el valor "nulo" o simplemente nada. ¿Hay alguna manera de arreglar esto? ¿O es la forma en que lo implementé lo que causa el problema? ¡Gracias de antemano a cualquiera que pueda ayudar!
EDITAR: Aquí está el código en ejecución en codesandbox .
Resolví tu problema y el código es el siguiente. espero haber ayudado
Al agregar @ a la etiqueta div, podemos ver los cambios en el contenido de la etiqueta en el método de cambio. Y en ese método, use emit$ para compartir su valor con otros componentes
<!-- 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>
Y aquí tenemos los props creados por $emit, cuyo valor inicializamos en la variable comentario. En realidad, tiene una función similar a 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>