Comment s'assurer que seul le message actuel affiche la zone d'édition lorsque vous cliquez sur un message différent?

Pourquoi l'ID est-il unique dans Vue3, mais l'entrée s'affiche en même temps?

Lorsque vous utilisez Vue3 pour développer une fonction d'édition d'enregistrements de chat, nous avons rencontré un problème: bien que l'ID de chaque message soit unique, chaque fois qu'un message différent est cliqué pour l'édition, tous les messages modifiés sont affichés, plutôt que uniquement le message actuellement cliqué affichant la boîte d'édition. Cette question est très déroutante pour moi car je me suis assuré que le MEG_ID pour chaque message est indépendant et que le meg_id est également correctement obtenu lors du clic.

Le problème est décrit comme suit: Ce que je veux réaliser, c'est que lorsque vous cliquez sur le premier message pour l'édition, lorsque vous cliquez sur le deuxième message, la zone d'édition du premier message doit être fermée, et seule la boîte d'édition du deuxième message doit être affichée pour réaliser un effet mutuellement exclusif.

Ce qui suit est le processus de mise en œuvre spécifique:

Code sous-composant

 
<div class="Chat-Container" v-if="props.dialogData.showeditContent && changegid">
    <div class="Chat-Input-box">
        <div class="top-box" v-wading="contentloading">
            <el-interf id="Chat-Input" autosize v-model="editContent" type="textarea" input="updatecursorposition" click="updatecursorposition" keyup="updatecursorposition" : placeholder="$ t ('text_send_to')"></el-interf>
        </div>
    </div>
    <div class="input-tips">
        ESC Key <span class="pub-color"> annuler </span> · Entrez Key <span class="pub-color"> Enregistrer </span>
    </div>
</div>
<div v-else: class="['dc-chat-content', props.dialogdata.author.bot? 'dc-chat-bot-content': '']">
    
    <el-popover placement="droite" : visible="toolsVisible" offset="1" show-arrow="false" popper-class="Custom-Popper" t>
        <div v-if="! props.dialogData.checked" class="plus">
            <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 click="handlelect (item.id)"></el-button:>
                 el-tooltip>
             el-bouton-groupe>
        </el-tooltip></el-button-group>
</div>
        <p> La partie du script du composant enfant:</p>
<pre class="brush:php;toolbar:false"> const props = DefineProps <dcdialogitemprops> ()
const emit = defineeMits  ()
const Menuiuitems = [
  {
    id: '1',
    Icône: «fini»,
    Titre: $ t ('text_multiple_choice')
  },
  {
    ID: '2',
    Icône: «édition»,
    Titre: $ t ('btn_edit')
  },
  {
    ID: '3',
    Icône: 'chatdotsquare',
    Titre: $ t ('btn_reply')
  }
]]

// Gire l'élément de menu Cliquez sur l'événement const editContent = ref ('')
const changegid = ref ('')
const CurrentEditing = ref (false) // utilisé pour marquer si le formulaire soumet const hatlesselect = (val: string) => {
  if (val === '1') {
    Props.dialogData.checked = true
  } else if (val === '2') {
    console.log ('- mancheselect --- 2', props.dialogData);
    Props.dialogData.isediting = true
    CurrentEditing.Value = false
    editContent.value = props.dialogdata.content
    changelid.value = props.dialogdata.msg_id
  }
  EMIT («Menuclick», Val, Prophes.dialogData)
}</dcdialogitemprops>

Code de composant parent

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

Le format de données de Messagelist est le suivant:

 [
    {
        "msg_id": "1276491426334769232",
        "Contenu": "Oh, fort",
        "Vérifié": faux
    },
    {
        "msg_id": "1276493284222701702",
        "Contenu": "Asdasdaasdsadasd",
        "Vérifié": faux
    },
    ... omis]

La partie de script du composant parent:

 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
    RépondreAuthor.Value = ''
    showrecords.value = false
    DialogData.ShowEditContent = True
  } else if (val === '3') {
    showReplymsg.value = true
    DialogData.ShowEditContent = False
    RépondreAuthor.Value = DialogData.Author.Username
    RépondreContent.Value = DialogData.Content
  }
}

Pour résoudre ce problème, la première chose à comprendre est que la propriété ShowItContent est définie dans le composant parent. Lorsqu'un message est cliqué, la fonction HandleMeNuclick définira le CONTENT DIFFICATION du message sur true. Cependant, cela ne ferme pas la boîte d'édition pour d'autres messages.

Pour réaliser un effet mutuellement exclusif, nous devons définir le contenu ShowItSiT de tous les autres messages à FAUX lorsque vous cliquez sur un nouveau message pour l'édition. Vous pouvez modifier la fonction HandlemeNuclick du composant parent, comme indiqué ci-dessous:

 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
    RépondreAuthor.Value = ''
    showrecords.value = false
    DialogData.ShowEditContent = True
  } else if (val === '3') {
    Messagelist.value.ForEach ((item) => {
      item.showEditContent = false
    })
    showReplymsg.value = true
    RépondreAuthor.Value = DialogData.Author.Username
    RépondreContent.Value = DialogData.Content
  }
}

Grâce aux modifications ci-dessus, chaque fois qu'un nouveau message est cliqué pour modifier, la boîte d'édition d'autres messages sera fermée, réalisant ainsi un effet mutuellement exclusif. De cette façon, bien que l'ID soit unique, la boîte d'entrée affiche uniquement la boîte d'édition du message actuellement cliqué comme nous le nous attendons.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!