vue3中为什么id是唯一的，input却同时会展示？
在使用vue3开发聊天记录编辑功能时，我们遇到了一个问题：虽然每个消息的id是唯一的，但每次点击不同的消息进行编辑时，所有被编辑的消息都显示出来了，而不是只有当前点击的消息显示编辑框。这个问题让我非常困惑，因为我已经确保了每个消息的meg_id是独立的，并且在点击时也正确获取到了meg_id。
问题描述如下：我想实现的是，当点击第一条消息进行编辑时，点击第二条消息时，第一条消息的编辑框应该关闭，只显示第二条消息的编辑框，达到互斥的效果。
以下是具体的实现过程：
子组件代码
<!-- 编辑文本内容 -->
<div class="chat-container" v-if="props.dialogdata.showeditcontent && changemsgid">
<div class="chat-input-box">
<div class="top-boxes" v-loading="contentloading">
<el-input ref="textinput" id="chat-input" autosize
v-model="editcontent" type="textarea" @input="updatecursorposition" @click="updatecursorposition" @keyup="updatecursorposition" :placeholder="$t('text_send_to')" />
</div>
</div>
<div class="input-tips">
esc键<span class="pub-color">取消</span> · 回车键<span class="pub-color">保存</span>
</div>
</div>
<div v-else :class="['dc-chat-content', props.dialogdata.author.bot ? 'dc-chat-bot-content' : '']">
<!-- 工具栏渲染 -->
<el-popover placement="right" :visible="toolsvisible" :offset="1" :show-arrow="false"
popper-class="custom-popper" :teleported="false">
<div v-if="!props.dialogdata.checked" class="more">
<el-button-group>
<el-tooltip v-for="item in menuitems" :key="item.id" effect="dark" :content="item.title" placement="top">
<el-button :icon="item.icon" size="small" :disabled="item.id === '2' && (userinfo.username !== props.dialogdata.author.username || !boolean(props.dialogdata.content))" @click="handleselect(item.id)" />
</el-tooltip>
</el-button-group>
</div>
<!-- 省略其他代码 -->子组件的script部分：
const props = defineprops<dcdialogitemprops>()
const emit = defineemits<{
(event: 'menuclick', value: string, item: object ): void
}>()
const menuitems = [
{
id: '1',
icon: 'finished',
title: $t('text_multiple_choice')
},
{
id: '2',
icon: 'edit',
title: $t('btn_edit')
},
{
id: '3',
icon: 'chatdotsquare',
title: $t('btn_reply')
}
]
// 处理菜单项点击事件
const editcontent = ref('')
const changemsgid = ref('')
const currentediting = ref(false) //用来标记表单是否正在提交
const handleselect = (val: string) => {
if(val === '1') {
props.dialogdata.checked = true
} else if (val === '2') {
console.log('--handleselect---2', props.dialogdata);
props.dialogdata.isediting = true
currentediting.value = false
editcontent.value = props.dialogdata.content
changemsgid.value = props.dialogdata.msg_id
}
emit('menuclick', val, props.dialogdata)
}父组件代码
<dcdialogitem v-for="item in messagelist"
@menu-click="handlemenuclick"
class="pulldown-list-item"
:key="item.msg_id"
:dialog-data="item"
:id="'msg' + item.msg_id" />messagelist的数据格式如下：
立即学习“前端免费学习笔记（深入）”；
[
{
"msg_id": "1276491426334769232",
"content": "啊撒大声地",
"checked": false
},
{
"msg_id": "1276493284222701702",
"content": "asdasdaasdsadasd",
"checked": false
},
...省略
]父组件的script部分：
const handlemenuclick = (val: string, dialogdata: any) => {
if(val === '1') {
messagelist.value.foreach((item) => {
item.checked = true
})
showrecords.value = true
showreplymsg.value = false
dialogdata.showeditcontent = false
} else if(val === '2') {
showreplymsg.value = false
replyauthor.value = ''
showrecords.value = false
dialogdata.showeditcontent = true
} else if(val === '3') {
showreplymsg.value = true
dialogdata.showeditcontent = false
replyauthor.value = dialogdata.author.username
replycontent.value = dialogdata.content
}
}解决这个问题，首先要理解的是，showeditcontent属性是在父组件中被设置的，当点击某个消息时，handlemenuclick函数会将该消息的showeditcontent设置为true。但是，这并没有关闭其他消息的编辑框。
要达到互斥的效果，我们需要在点击新的消息进行编辑时，将所有其他消息的showeditcontent设置为false。可以修改父组件的handlemenuclick函数，如下所示：
const handleMenuClick = (val: string, dialogData: any) => {
if(val === '1') {
messageList.value.forEach((item) => {
item.checked = true
item.showEditContent = false
})
showRecords.value = true
showReplyMsg.value = false
} else if(val === '2') {
messageList.value.forEach((item) => {
item.showEditContent = false
})
showReplyMsg.value = false
replyAuthor.value = ''
showRecords.value = false
dialogData.showEditContent = true
} else if(val === '3') {
messageList.value.forEach((item) => {
item.showEditContent = false
})
showReplyMsg.value = true
replyAuthor.value = dialogData.author.username
replyContent.value = dialogData.content
}
}通过以上修改，每次点击新的消息进行编辑时，其他消息的编辑框都会被关闭，从而达到互斥的效果。这样，id虽然是唯一的，但input框的展示也会如我们期望的那样，只显示当前点击的消息的编辑框。
