Vue3中如何確保點擊不同消息時只有當前消息顯示編輯框？

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" :placeholder="$t('text_send_to')"></el-input>
        </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))"></el-button>
                </el-tooltip>
            </el-button-group>
        </div>
        <!-- 省略其他代碼--><p>子組件的script部分：</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')
  }
]

// 處理菜單項點擊事件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)
}</dcdialogitemprops>

父組件代碼

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

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中如何確保點擊不同消息時只有當前消息顯示編輯框？的詳細內容。更多資訊請關注PHP中文網其他相關文章！