IDがVUE3でユニークなのはなぜですが、入力が同時に表示されるのですか？

VUE3を使用してチャットレコード編集機(jī)能を開発する場合、問題が発生しました。各メッセージのIDは一意ですが、編集のために別のメッセージがクリックされるたびに、編集されたメッセージが表示されている現(xiàn)在クリックされているメッセージのみではなく、編集されたメッセージが表示されます。この質(zhì)問は、各メッセージのMEG_IDが獨(dú)立しており、クリック時にMEG_IDも正しく取得されることを確認(rèn)したため、非常に混亂しています。

問題は次のように説明されています。私が達(dá)成したいのは、編集の最初のメッセージをクリックするとき、2番目のメッセージをクリックするとき、最初のメッセージの編集ボックスを閉じ、2番目のメッセージの編集ボックスのみを表示して相互に排他的な効果を?qū)g現(xiàn)することです。

以下は、特定の実裝プロセスです。

サブコンポーネントコード

<div class="chat-c??ontainer" v-if="props.dialogdata.showeditcontent && chanseggid">
    <div class="chat-input-box">
        <div class="top-boxes" v-loading="contentloading">
            <el-intput ref="textinput" id="chat-input" autosize v-model="editcontent" type="textarea" t></el-intput>
        </div>
    </div>
    <div class="input-tips">
        ESC Key <span class="pub-color">キャンセル</span>?キー<span class="pub-color"> save </span>を入力します
    </div>
</div>
<div v-else>
    
    <el-popover placement="right" popper-class="Custom-Popper">
        <div v-if="！props.dialogdata.checked" class="more">
            <el-button-group>
                <el-tooltip v-for="item in menuitems" effect="dark" placement="top">
                    <el-button size="small" props.dialogdata.author.username>
            </el-button></el-tooltip></el-button-group>
        </div>
        <p>子コンポーネントのスクリプト部分：</p>
<pre class="brush:php;toolbar:false"> const props = defineProps <dcdialogitemprops>（）
const emit = defineemits （）
const menuitems = [
  {
    ID： '1'、
    アイコン：「完成」、
    タイトル：$ t（ 'text_multiple_choice'）
  }、
  {
    ID： '2'、
    アイコン： '編集'、
    タイトル：$ t（ 'btn_edit'）
  }、
  {
    ID： '3'、
    アイコン：「ChatDotsquare」、
    タイトル：$ t（ 'btn_reply'）
  }
]

//ハンドルメニュー項(xiàng)目クリックイベントconst editcontent = ref（ ''）
const changesSgid = 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
    changessgid.value = props.dialogdata.msg_id
  }
  emit（ 'menuclick'、val、props.dialogdata）
}</dcdialogitemprops>

親コンポーネントコード

<dcdialogitem v-for="messageListのアイテム" class="pulldown-list-item" item.msg_id></dcdialogitem>

Messagelistのデータ形式は次のとおりです。

 [
    {
        「MSG_ID」： "1276491426334769232"、
        「コンテンツ」：「ああ、大聲で」、
        「チェック」：偽
    }、
    {
        「MSG_ID」： "1276493284222701702"、
        「コンテンツ」：「asdasdaasdsadasd」、
        「チェック」：偽
    }、
    ...省略]

親コンポーネントのスクリプト部分：

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

この問題を解決するために、最初に理解することは、showtitcontentプロパティが親コンポーネントに設(shè)定されていることです。メッセージがクリックされると、Handlemenuclick関數(shù)がメッセージの表示コンテンツをtrueに設(shè)定します。ただし、これは他のメッセージの編集ボックスを閉じません。

相互に排他的な効果を?qū)g現(xiàn)するには、編集用の新しいメッセージをクリックするときに、他のすべてのメッセージのshowtitcontentをfalseに設(shè)定する必要があります。以下に示すように、親コンポーネントのHandlemenuclick関數(shù)を変更できます。

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

上記の変更により、新しいメッセージがクリックして編集するたびに、他のメッセージの編集ボックスが閉じられ、相互に排他的な効果が実現(xiàn)されます。このようにして、IDは一意ですが、入力ボックスには、予想通り、現(xiàn)在クリックされているメッセージの編集ボックスのみが表示されます。