[英]V-model on div tag component
There's an issue when using v-model
to div
tags.将v-model
用于div
标签时存在问题。 Apparently, div
tags doesn't allow v-model
and I've decided to create my comment section as a component.显然, div
标签不允许使用v-model
,我决定将我的评论部分创建为一个组件。 I needed to assign this div
text area as is because of UI/UX reasons.由于 UI/UX 的原因,我需要按原样分配这个div
文本区域。 textarea
, input
, etc tags, as to my knowledge, these tags are not compatible with contenteditable="true"
; textarea
, input
等标签,据我所知,这些标签与contenteditable="true"
不兼容; I need to expand the height of the input field as a user types in their comments.当用户在他们的评论中键入时,我需要扩展输入字段的高度。 Below is the vue component that I imported in my parent view.下面是我在父视图中导入的 vue 组件。
<!-- 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>
On my view file, I imported it and used v-model
into it, just like this.在我的视图文件中,我将其导入并使用了v-model
,就像这样。
<!--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>
However, when I check my console, it gives me the value "null" or just nothing.然而,当我检查我的控制台时,它给我的值是“null”或者什么都没有。 Is there's a way to fix this?有没有办法解决这个问题? Or is it the way I implemented it that causes the problem.或者是我实现它的方式导致了问题。 Thank you in advance for anyone who can help!提前感谢任何可以提供帮助的人!
EDIT: Here's the running code in codesandbox .编辑:这是codesandbox中的运行代码。
I solved your problem and the code is as follows.我解决了你的问题,代码如下。 I hope I have helped我希望我有帮助
By adding @ to the div tag, we can see the changes in the content of the tag in the change method.通过在div标签中添加@,我们可以在change方法中看到标签内容的变化。 And in that method, use emit$ to share its value with other components在该方法中,使用 emit$ 与其他组件共享其值
<!-- 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>
And here we have the props created by $emit, whose value we initialize in the comment variable.这里我们有 $emit 创建的 props,我们在 comment 变量中初始化了它的值。 Actually, it has a function similar to v-model.实际上,它有一个类似于 v-model 的 function。
<!--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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.