Vue 슬롯이 드물고 예측할 수 없는 경우(잠재적인 vue 버그)에서 작동하지 않습니다.

Vue 슬롯이 드물고 예측할 수 없는 경우(잠재적인 vue 버그)에서 작동하지 않습니다.

어떤 경우에는 신뢰할 수 없는 슬롯이 있는 이상한 버그가 있습니다.

구성 요소들

3개의 계층 구성 요소가 있습니다.

• 손자(headlessTable)는 다음과 같은 이름의 슬롯을 제공합니다.arrayValue.
• 자녀(collapsableCard). 손자와 부모 사이의 슬롯을 통과합니다.
• 그 슬롯의 링크를 렌더링하는 부모(orderDataCard).

문제:새 데이터가 로드될 때 부모 링크를 렌더링하는 대신 하위의 기본 슬롯 html이 렌더링됩니다.

데이터 구조(order Details)

• 프로세스(obj)
  • 마크(문자열)
  • 공통(obj)
    • additional Arguments(어레이)
      • 카테고리(문자열)
      • type(문자열)
      • name(문자열)
      • 값(문자열)
  • 판매 조직(OBJ)
  • 청구서(어레이)
    • invoice Agreement Id(문자열)
    • payment Type(문자열)

재생산

Stackblitz 또는 Codesandbox

들판을 봐주세요additionalArguments, 링크가 포함되어 있습니다.ALT+M을 눌러 새 데이터 가져오기를 시뮬레이션합니다.이제 링크를 렌더링하는 대신 지정된 슬롯의 기본 슬롯 html이 렌더링됩니다.ALT+J를 눌러 원래 데이터를 로드할 수 있지만, 이번에는 링크가 없습니다.

초기 데이터(ALT+J)	로드된 데이터(ALT+M)	유형	등가
	마크.	스트레이트	거짓의
흔한	흔한	obj	진실의
판매 조직	판매 조직	obj	진실의
청구서(공백)	청구서	arr	거짓의

2의 해결 방법

• app.js(또는 codesandbox에 있는 경우에는 App.vue의 73행)에서 68행의 코멘트를 해제한 경우, 이 필드는 다음과 같습니다.mark
• 한다면invoicesapp.http에서는 처음에 비어있지 않습니다.
• 한다면markorderDataCard의 html에서 삭제되었습니다.
• 한다면salesOrganisationorderDataCard의 html에서 삭제되었습니다.
• v-for 템플릿 섹션의 html에서invoiceItemsorderDataCard가 비어 있습니다.

분명히 이것들은 해결책이 아닙니다.

메모들

어떤 경우에도 필드 간에 종속성이 없기 때문에 왜 이런 현상이 발생하는지 이해하기 어렵고 vue의 버그로 의심됩니다.이미 이슈를 만들었습니다.그러나 개발자는 #lines > 100과 같이 최소가 아니라고 생각하기 때문에 복제를 검토하지 않습니다.의미 있는 행을 삭제하면 버그가 해결되고 제거된 코드는 오류가 없기 때문에 작업하기가 매우 어렵습니다.의미가 없는 선은 삭제할 수 있지만, 관련된 모든 사람이 어떤 데이터가 렌더링되고 있는지 이해하기 어려워집니다.

이것이 vue의 문제이며 코드가 축소할 수 없다는 사실을 인식할 수 있는 사람이 있습니까?아니면 이 문제를 해결할 수 있는 사람이 있습니까?

이 문제는 동일한 구성 요소의 여러 인스턴스에 대한 Vue 처리와 연결됩니다. »OrderDataCard.vue 두 .Collapsable-Card고유 키 없음. " " " 입니다.

Vue는 요소의 이동을 최소화하는 알고리즘을 사용하여 가능한 한 같은 유형의 요소에 패치/재사용을 시도합니다.

이러한 알고리즘이 어떻게 동작하는지는 잘 모르겠습니다만, (슬롯 컨텐츠가 정의되어 있지 않은) 두 번째 인스턴스를 재사용한 이유는 분명합니다만, 이러한 컴포넌트에 고유의 키를 설정하면 문제가 해결되었습니다.

작업 코드 샌드박스(https://codesandbox.io/s/admiring-hamilton-5ytpp?file=/src/components/OrderDataCard.vue:133-149)를 참조하십시오.

주의: 브라우저에서 키보드 이벤트를 트리거할 수 없었기 때문에 버튼 클릭으로 이벤트를 트리거했습니다.

이것이 해결책은 아닐 수 있지만 찾는 데 도움이 될 수 있습니다.

물건들

오브젝트로 작업하여 어레이로 변환하고 있는 것을 알 수 있었습니다.어레이와 달리 업데이트된 속성은 전파되지 않으므로 개체 속성에 문제가 있을 수 있습니다.이것은 JavaScript의 문제이지 Vue의 문제가 아닙니다.Vue는 옵저버가 도입되었기 때문에 가능했지만 오브젝트는 아직 그 일부가 아닙니다.

개체가 부분적으로 업데이트되면 문제가 발생할 수 있습니다.

저는 Vue.set을 볼 것을 제안합니다.
는 그것을 한다.window.Vue.set()Vue가 개체 속성을 올바르게 전파할 수 있도록 개체 속성 변경 사항을 적용합니다.

이는 Vue의 버그이지만 JavaScript 자체에서 비롯되었습니다.

계산 어레이

완전히 확신할 수는 없지만 객체 관련 작업에서는 계산 어레이가 위의 문제를 해결하지 못합니다.
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★.Vue.set()개체 및 개체 속성을 업데이트할 때 사용합니다.그러면 계산된 어레이를 계속 사용할 수 있습니다.

그렇지 않으면 당연한 것:반나절의 시간을 오브젝트로 작업하지 않고 오브젝트로 실제 어레이를 만듭니다.

this.프로세스

사용하시는 이유가 있습니까?this.process포넌트 ?품?니면 라라 라??

슬롯

해 본 적이 만, 하지 않았습니까?collapsable-card크크자 체력 출력 ?? ????.collapsable-card소 maybe. 에서 본인지도 몰라요.어쩌면 위에서 본 물건 때문이기도 한 것 같아요

언급URL : https://stackoverflow.com/questions/68802093/vue-slot-is-not-working-in-rare-and-unpredictable-cases-potential-vue-bug