首页 > 文章 > 前端

Vue3点击消息仅显示当前编辑框方法

时间：2025-04-03 13:45:26 341浏览收藏

本文介绍了在Vue3中实现聊天记录编辑功能时遇到的问题及解决方案。由于每次点击编辑消息时，所有消息的编辑框都会显示，文章分析了原因：父组件控制的`showeditcontent`属性未能实现编辑框的互斥显示。解决方法是修改父组件的`handlemenuclick`函数，在点击编辑新消息前，先将所有消息的`showeditcontent`属性设置为`false`，确保只有一个消息的编辑框可见。文章通过代码示例详细讲解了子组件和父组件的交互，以及数据结构的设计，最终实现了点击消息时仅显示当前消息编辑框的功能，有效解决了Vue3中编辑框显示的冲突问题。

vue3中为什么id是唯一的，input却同时会展示？

在使用vue3开发聊天记录编辑功能时，我们遇到了一个问题：虽然每个消息的id是唯一的，但每次点击不同的消息进行编辑时，所有被编辑的消息都显示出来了，而不是只有当前点击的消息显示编辑框。这个问题让我非常困惑，因为我已经确保了每个消息的meg_id是独立的，并且在点击时也正确获取到了meg_id。

问题描述如下：我想实现的是，当点击第一条消息进行编辑时，点击第二条消息时，第一条消息的编辑框应该关闭，只显示第二条消息的编辑框，达到互斥的效果。

以下是具体的实现过程：

子组件代码



    
        
            
        
    
    
        esc键取消 · 回车键保存

子组件的script部分：

const props = defineprops()
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)
}

父组件代码

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框的展示也会如我们期望的那样，只显示当前点击的消息的编辑框。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。