Wie kann ich sicherstellen, dass nur die aktuelle Nachricht das Feld bearbeiten, wenn Sie auf eine andere Nachricht klicken?

Warum ist die ID in VUE3 eindeutig, aber gleichzeitig wird die Eingabe angezeigt?

Bei der Verwendung von VUE3 zur Entwicklung von Chat -Datenaufzeichnungsbearbeitungsfunktionen haben wir ein Problem gestoßen: Obwohl die ID jeder Nachricht eindeutig ist, werden jedes Mal, wenn eine andere Nachricht für die Bearbeitung geklickt wird, alle bearbeiteten Nachrichten angezeigt, anstatt nur die aktuell geklickte Nachricht, in der das Feld Bearbeitungsfeld angezeigt wird. Diese Frage ist für mich sehr verwirrend, weil ich dafür gesorgt habe, dass die MEG_ID für jede Nachricht unabhängig ist und dass das MEG_ID beim Klicken auch korrekt erhalten wird.

Das Problem wird wie folgt beschrieben: Was ich erreichen möchte, ist, dass beim Klicken auf die erste Nachricht zum Bearbeiten, beim Klicken auf die zweite Nachricht das Bearbeitungsfeld der ersten Nachricht geschlossen werden sollte und nur das Bearbeitungsfeld der zweiten Nachricht angezeigt werden sollte, um einen gegenseitig ausschließlichen Effekt zu erzielen.

Das Folgende ist der spezifische Implementierungsprozess:

Subcomponent -Code

 
<div class="chat-container" v-if="props.dialogdata.showeditContent && Änderungsgid">
    <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') />
        </div>
    </div>
    <div class = " eingabe-tipps>
        ESC-Schlüssel <span class="pub-color"> abbrechen </span> · Taste eingeben <span class="pub-color"> speichern </span>
    </el-input>
</div>
</div>
<div v-else: class="['dc-chat-content', props.dialogdata.author.bot? 'DC-Chat-Bot-Content': '']">
    
    <el-popover placement="right" : sactible="ToolsVisible" offset="1" show-arrow="false" popper-class="benutzerdefinierter popper" teleported="false">
        <div v-if="! props.dialogdata.Checked" class="more">
            <el-button-gruppen>
                <el-tooltip v-for="item in Menuitems" : key="item.id" effect="dark" content="item.title" placement="top">
                    <el-button: icon="item.icon" size="small" : dentabled="item.id === '2' && (userInfo.username!
                </el-tooltip>
            </el-Button-Gruppen>
        </div>
        <!-andere Codes weglassen->

Der Skriptteil der untergeordneten Komponente:

 const props = DefineProps <dcdialogItemProps> ()
const emit = defineEemits <{
  (Ereignis: 'Menuclick', Wert: String, Element: Objekt): void
}> ()
constmenuitems = [
  {
    ID: '1',
    Symbol: 'fertig',,
    Titel: $ T ('text_multiple_choice')
  },
  {
    ID: '2',
    Symbol: " bearbeiten titel: t id: ikone: men verhalten klicken sie auf ereignis const editcontent="ref" changesgid="ref" trortlediting="ref" verwendet um zu markieren ob das formular handleselect="(val:" string> {
  if (val === '1') {
    props.dialogdata.Checked = true
  } else if (val === '2') {
    console.log ('-HandleSelect --- 2', props.dialogdata);
    props.dialogdata.isediting = true
    Currentiting.Value = false
    editContent.Value = props.dialogdata.content
    Änderungensgid.Value = props.dialogdata.msg_id
  }
  Emit ('Menuclick', Val, props.dialogdata)
}<h4 id="Übergeordnete-Komponentencode"> Übergeordnete Komponentencode</h4>
<pre class="brush:php;toolbar:false"> <dcdialogitem v-for="Element in Messagelist" class="Pulldown-List-Element" : key="item.msg_id" dialogdaten="Element" id="'msg' item.msg_id"></dcdialogitem>

Das Datenformat der Messagelist ist wie folgt:

 [
    {
        "msg_id": "1276491426334769232",
        "Inhalt": "Oh, laut",
        "überprüft": Falsch
    },
    {
        "MSG_ID": "1276493284222701702",
        "Inhalt": "Asdasdaasdsadasd",
        "überprüft": Falsch
    },
    ... weggelassen]

Der Skriptteil der übergeordneten Komponente:

 const handlemenuclick = (val: string, dialogdata: any) => {
  if (val === '1') {
    messagelist.value.foreach ((item) => {
      item.Conted = true
    })
    showRecords.value = true
    showReplymmsg.Value = false
    dialogData.showeditContent = false
  } else if (val === '2') {
    showReplymmsg.Value = false
    ReplyAuthor.Value = '' '
    showRecords.value = false
    dialogData.showeditContent = true
  } else if (val === '3') {
    showReplymmsg.Value = true
    dialogData.showeditContent = false
    ReplyAuthor.Value = DialogData.Author.username
    ReplyContent.Value = DialogData.Content
  }
}

Um dieses Problem zu lösen, ist das erste, was zu verstehen ist, dass die Eigenschaft mit ShowIntent in der übergeordneten Komponente eingestellt ist. Wenn eine Nachricht angeklickt wird, setzt die Handlemenuklick -Funktion die Meldung der Nachricht auf true. Dies schließt das Bearbeitungsfeld jedoch nicht für andere Nachrichten.

Um sich gegenseitig ausschließende Effekte zu erzielen, müssen wir den vorgeschriebenen Teil aller anderen Nachrichten auf false festlegen, wenn Sie auf eine neue Nachricht zur Bearbeitung klicken. Sie können die Handlemenuklick -Funktion der übergeordneten Komponente ändern, wie unten gezeigt:

 const handlemenuclick = (val: string, dialogdata: any) => {
  if (val === '1') {
    messagelist.value.foreach ((item) => {
      item.Conted = true
      item.showeditContent = false
    })
    showRecords.value = true
    showReplymmsg.Value = false
  } else if (val === '2') {
    messagelist.value.foreach ((item) => {
      item.showeditContent = false
    })
    showReplymmsg.Value = false
    ReplyAuthor.Value = '' '
    showRecords.value = false
    dialogData.showeditContent = true
  } else if (val === '3') {
    messagelist.value.foreach ((item) => {
      item.showeditContent = false
    })
    showReplymmsg.Value = true
    ReplyAuthor.Value = DialogData.Author.username
    ReplyContent.Value = DialogData.Content
  }
}

Durch die oben genannten Änderungen wird jedes Mal, wenn eine neue Nachricht zum Bearbeiten geklickt wird, das Bearbeitungsfeld anderer Nachrichten geschlossen, wodurch ein gegenseitig ausschließender Effekt erzielt wird. Obwohl die ID eindeutig ist, zeigt das Eingabefeld nur das Bearbeitungsfeld der aktuell geklickten Nachricht an, wie wir es erwarten.