다른 메시지를 클릭 할 때 현재 메시지 만 편집 상자를 표시하는지 확인하는 방법은 무엇입니까?

vue3에서 ID가 고유 한 이유이지만 입력이 동시에 표시됩니까?

vue3를 사용하여 채팅 레코드 편집 기능을 개발할 때 문제가 발생했습니다. 각 메시지의 ID가 고유하지만 편집을 위해 다른 메시지를 클릭 할 때마다 편집 상자를 표시하는 현재 클릭 한 메시지가 아닌 모든 편집 된 메시지가 표시됩니다. 이 질문은 각 메시지의 MEG_ID가 독립적이며 클릭 할 때 MEG_ID도 올바르게 얻은지 확인했기 때문에 나에게 매우 혼란 스럽습니다.

문제는 다음과 같이 설명됩니다. 달성하려는 것은 편집을위한 첫 번째 메시지를 클릭 할 때 두 번째 메시지를 클릭 할 때 첫 번째 메시지의 편집 상자를 닫아야하며 두 번째 메시지의 편집 상자 만 표시되어 상호 배타적 효과를 달성해야한다는 것입니다.

다음은 특정 구현 프로세스입니다.

하위 구성 요소 코드

 
<div class="Chat-container" v-if="propss.dialogdata.showeditContent && ChangesGid">
    <div class="Chat-input-box">
        <div class="상단 박스" v-loading="ContmentLoading">
            <el-input ref="textInput" id="채팅 입력" v-model="editContent" type="textArea" t></el-input>
        </div>
    </div>
    <div class="Input-Tips">
        ESC Key <span class="pub-color"> 취소 </span> · key <span class="pub-color"> 저장 </span>을 입력하십시오
    </div>
</div>
<div v-else : class="[ 'DC-Chat-Content', props.dialogdata.author.bot? 'dc-Chat-Bot-Content': '']">
    
    <el-popover placement="right" : visible="toolsvisible" offset="1" show-arrow="false" popper-class="Custom-Popper">
        <div v-if="! props.dialogdata.Checked" class="more">
            <el-button-group>
                <el-tooltip v-for="menuitems의 항목" : key="item.id" effect="dark" content="item.title" placement="top">
                    <el-button : icon="item.icon" size="small" disabled></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 changesgid = 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
    changesgid.value = props.dialogdata.msg_id
  }
  Emit ( 'menuclick', val, props.dialogdata)
}</dcdialogitemprops>

부모 구성 요소 코드

 <dcdialogitem v-for="Messagelist의 항목" : key="item.msg_id" dialog-data="항목" id=" 'msg'item.msg_id"></dcdialogitem>

Messagelist의 데이터 형식은 다음과 같습니다.

 [의 뜻
    {
        "msg_id": "1276491426334769232",
        "콘텐츠": "오, 큰 소리로",
        "확인": 거짓
    },
    {
        "msg_id": "127649328422701702",
        "콘텐츠": "Asdasdaasdsadasd",
        "확인": 거짓
    },
    ... 생략]

상위 구성 요소의 스크립트 부분 :

 const handlemenuclick = (val : string, dialogdata : any) => {
  if (val === '1') {
    Messagelist.value.foreach ((항목) => {
      item.checked = true
    })
    showrecords.value = true
    showreplymsg.value = false
    dialogdata.showeditContent = false
  } else if (val === '2') {
    showreplymsg.value = false
    Replauthor.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
  }
}

이 문제를 해결하기 위해 가장 먼저 이해해야 할 것은 ShowitContent 속성이 상위 구성 요소에 설정되어 있다는 것입니다. 메시지가 클릭되면 HandleMenuclick 함수는 메시지의 표시를 True로 설정합니다. 그러나 이것은 다른 메시지의 편집 상자를 닫지 않습니다.

상호 배타적 인 효과를 얻으려면 편집을위한 새 메시지를 클릭 할 때 다른 모든 메시지의 ShowitContent를 False로 설정해야합니다. 다음과 같이 부모 구성 요소의 HandleMenuclick 함수를 수정할 수 있습니다.

 const handlemenuclick = (val : string, dialogdata : any) => {
  if (val === '1') {
    Messagelist.value.foreach ((항목) => {
      item.checked = true
      item.showeditContent = false
    })
    showrecords.value = true
    showreplymsg.value = false
  } else if (val === '2') {
    Messagelist.value.foreach ((항목) => {
      item.showeditContent = false
    })
    showreplymsg.value = false
    Replauthor.value = ''
    showrecords.value = false
    dialogdata.showeditContent = true
  } else if (val === '3') {
    Messagelist.value.foreach ((항목) => {
      item.showeditContent = false
    })
    showreplymsg.value = true
    ReplyAuthor.Value = DialogData.author.username
    ReplyContent.Value = DialogData.Content
  }
}

위의 수정을 통해 새 메시지를 클릭하여 편집 할 때마다 다른 메시지의 편집 상자가 닫히므로 상호 배타적 인 효과가 달성됩니다. 이런 식으로 ID는 고유하지만 입력 상자에는 예상대로 현재 클릭 된 메시지의 편집 상자 만 표시됩니다.