How to ensure that only the current message displays the edit box when clicking on a different message?

Why is the id unique in vue3, but input is displayed at the same time?

When using vue3 to develop chat record editing function, we encountered a problem: although the id of each message is unique, every time a different message is clicked for editing, all the edited messages are displayed, rather than only the currently clicked message displaying the edit box. This question is very confusing to me because I have made sure that the meg_id for each message is independent and that the meg_id is also correctly obtained when clicking.

The problem is described as follows: What I want to achieve is that when clicking the first message for editing, when clicking the second message, the edit box of the first message should be closed, and only the edit box of the second message should be displayed to achieve a mutually exclusive effect.

The following is the specific implementation process:

Subcomponent code

 <!-- Edit text content-->
<div class="chat-container" v-if="props.dialogdata.showeditcontent && changesgid">
    <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" :placeholder="$t('text_send_to')"></el-input>
        </div>
    </div>
    <div class="input-tips">
        esc key<span class="pub-color">Cancel</span> · Enter key<span class="pub-color">Save</span>
    </div>
</div>
<div v-else :class="['dc-chat-content', props.dialogdata.author.bot ? 'dc-chat-bot-content' : '']">
    <!-- Toolbar Rendering-->
    <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))"></el-button>
                </el-tooltip>
            </el-button-group>
        </div>
        <!-- Omit other codes--><p> The script part of the child component:</p>
<pre class="brush:php;toolbar:false"> const props = defineprops<dcdialogitemprops>()
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')
  }
]

// Handle menu item click event const editcontent = ref('')
const changesgid = ref('')
const currentediting = ref(false) // Used to mark whether the form is submitting 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
    changesgid.value = props.dialogdata.msg_id
  }
  emit('menuclick', val, props.dialogdata)
}</dcdialogitemprops>

Parent component code

 <dcdialogitem v-for="item in messagelist" class="pulldown-list-item" :key="item.msg_id" :dialog-data="item" :id="'msg' item.msg_id"></dcdialogitem>

The data format of messagelist is as follows:

 [
    {
        "msg_id": "1276491426334769232",
        "content": "Oh, loudly",
        "checked": false
    },
    {
        "msg_id": "1276493284222701702",
        "content": "asdasdaasdsadasd",
        "checked": false
    },
    ...Omitted]

The script part of the parent component:

 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
  }
}

To solve this problem, the first thing to understand is that the showeditcontent property is set in the parent component. When a message is clicked, the handlemenuclick function will set the showeditcontent of the message to true. However, this does not close the edit box for other messages.

To achieve mutually exclusive effect, we need to set the showeditcontent of all other messages to false when clicking on a new message for editing. You can modify the handlemenuclick function of the parent component, as shown below:

 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
  }
}

Through the above modifications, each time a new message is clicked to edit, the editing box of other messages will be closed, thus achieving a mutually exclusive effect. In this way, although the id is unique, the input box will display only the edit box of the currently clicked message as we expect.

The above is the detailed content of How to ensure that only the current message displays the edit box when clicking on a different message?. For more information, please follow other related articles on the PHP Chinese website!