別のメッセージをクリックするときに、現在のメッセージのみが編集ボックスを表示するようにする方法は？

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

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

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

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

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

<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'）
  }
]

//ハンドルメニュー項目クリックイベント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プロパティが親コンポーネントに設定されていることです。メッセージがクリックされると、Handlemenuclick関数がメッセージの表示コンテンツをtrueに設定します。ただし、これは他のメッセージの編集ボックスを閉じません。

相互に排他的な効果を実現するには、編集用の新しいメッセージをクリックするときに、他のすべてのメッセージのshowtitcontentを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は一意ですが、入力ボックスには、予想通り、現在クリックされているメッセージの編集ボックスのみが表示されます。

以上が別のメッセージをクリックするときに、現在のメッセージのみが編集ボックスを表示するようにする方法は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。