vue3中为什么id是唯一的，input却同时会展示？
在使用vue3开发聊天记录编辑功能时，我们遇到了一个问题：虽然每个消息的id是唯一的，但每次点击不同的消息进行编辑时，所有被编辑的消息都显示出来了，而不是只有当前点击的消息显示编辑框。这个问题让我非常困惑，因为我已经确保了每个消息的meg_id是独立的，并且在点击时也正确获取到了meg_id。
问题描述如下：我想实现的是，当点击第一条消息进行编辑时，点击第二条消息时，第一条消息的编辑框应该关闭，只显示第二条消息的编辑框，达到互斥的效果。
以下是具体的实现过程：
子组件代码
esc键取消 · 回车键保存子组件的script部分：
const props = defineprops()const emit = defineemits()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)}父组件代码
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框的展示也会如我们期望的那样，只显示当前点击的消息的编辑框。
以上就是Vue3中如何确保点击不同消息时只有当前消息显示编辑框？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1504057.html
微信扫一扫
支付宝扫一扫
