Bagaimana untuk memastikan bahawa hanya mesej semasa memaparkan kotak edit semasa mengklik pada mesej yang berbeza?

Mengapa ID unik di VUE3, tetapi input dipaparkan pada masa yang sama?

Apabila menggunakan VUE3 untuk membangunkan fungsi penyuntingan rekod sembang, kami menghadapi masalah: Walaupun ID setiap mesej adalah unik, setiap kali mesej yang berbeza diklik untuk penyuntingan, semua mesej yang diedit dipaparkan, bukan hanya mesej yang diklik pada masa ini memaparkan kotak edit. Soalan ini sangat membingungkan saya kerana saya telah memastikan bahawa meg_id untuk setiap mesej adalah bebas dan bahawa meg_id juga diperoleh dengan betul semasa mengklik.

Masalahnya digambarkan seperti berikut: Apa yang saya ingin capai ialah apabila mengklik mesej pertama untuk mengedit, apabila mengklik mesej kedua, kotak edit mesej pertama harus ditutup, dan hanya kotak edit mesej kedua harus dipaparkan untuk mencapai kesan eksklusif yang saling eksklusif.

Berikut adalah proses pelaksanaan tertentu:

Kod subkomponen

 
<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">
        Kunci ESC <span class="pub-color"> membatalkan </span> · Masukkan kunci <span class="pub-color"> simpan </span>
    </div>
</div>
<div v-else: class="['dc-chat-content', props.dialogdata.author.bot? 'dc-chat-bot-content': '']">
    
    <el-popover placement="Right" : look="ToolSvisible" offset="1" show-arrow="false" popper-class="Custom-Popper" teleported="false">
        <div v-if="! props.dialogdata.checked" class="more">
            <el-button-belup>
                <el-tooltip v-for="item dalam menuItems" : key="item.id" effect="dark" content="item.title" placement="Top">
                    <el-button: icon="item.icon" size="small" : disabled item dalam messagelist kelas="pulldown-list-item" kunci="item.msg_id" dialog-data="item" id="'msg' item.msg_id"></el-button:><p> Format data Messagelist adalah seperti berikut:</p>
<pre class="brush:php;toolbar:false"> [
    {
        "msg_id": "1276491426334769232",
        "Kandungan": "Oh, dengan kuat",
        "diperiksa": palsu
    },
    {
        "msg_id": "1276493284222701702",
        "Kandungan": "Asdasdaasdsadasd",
        "diperiksa": palsu
    },
    ... ditinggalkan]

Bahagian skrip komponen induk:

 const handlemenuclick = (val: string, dialogdata: any) => {
  jika (val === '1') {
    MessageList.Value.Foreach ((item) => {
      item.Checked = benar
    })
    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
  }
}

Untuk menyelesaikan masalah ini, perkara pertama yang perlu difahami adalah bahawa harta yang ditunjukkan sebagai komponen induk. Apabila mesej diklik, fungsi Handlemenuclick akan menetapkan pertunjukan yang menunjukkan mesej kepada Benar. Walau bagaimanapun, ini tidak menutup kotak edit untuk mesej lain.

Untuk mencapai kesan eksklusif yang saling eksklusif, kita perlu menetapkan persembahan yang menunjukkan semua mesej lain kepada palsu apabila mengklik mesej baru untuk mengedit. Anda boleh mengubahsuai fungsi handlemenuclick komponen induk, seperti yang ditunjukkan di bawah:

 const handlemenuclick = (val: string, dialogdata: any) => {
  jika (val === '1') {
    MessageList.Value.Foreach ((item) => {
      item.Checked = benar
      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
  }
}

Melalui pengubahsuaian di atas, setiap kali mesej baru diklik untuk mengedit, kotak penyuntingan mesej lain akan ditutup, dengan itu mencapai kesan eksklusif yang saling eksklusif. Dengan cara ini, walaupun ID adalah unik, kotak input hanya akan memaparkan kotak edit mesej yang diklik sekarang seperti yang kita harapkan.