v-for는 "상자" 내의 각 "상자"에 대해 렌더링되므로 각 상자에 대해 하나씩 가져와야 합니다.

페인트의 각 페인트에 대해 각 상자 안의 각 페인트에 대한 div를 렌더링해야 합니다.

v-if 和 v-else-if 和 v-else 将根据其中包含的谓词有条件地渲染它们的块。我不确定数组 matchingdata 来自您的示例中的位置，但如果它包含具有与 box.bodi 和 paint.paintid 和 paint.paintid 匹配的属性 boxy 和 paintid 的元素，则 matchingdata.some((m ) => m.boxy == box.boxy && m.paintid == Paint.paintid) 만족하고 관련 div가 렌더링됩니다. 그렇지 않으면 'v-else' div가 렌더링됩니다(주석이 없는 경우).

코드는 상자 안의 각 상자를 반복하며, 각 상자에 대해 페인트의 각 페인트를 반복하여 일치하는 데이터에서 다음과 유사한 요소를 찾습니다.

v-for와 (v-if, v-else-if, v-else) 블록은 서로 연결되어 있지 않습니다. v-for는 목록의 각 항목에 대한 요소를 렌더링하는 루프를 나타냅니다. v-if 블록은 정의한 조건에 따라 요소를 페이지에 조건부로 렌더링합니다.

v-if, v-else-if 및 v-else는 동일한 논리 블록에 포함되려면 서로 바로 뒤에 나타나야 합니다.

다시 사용하세요 matchingdata.some()

페인트를 찾을 수 있는지 확인하는 v-if 루프 위의 v-for 루프 내에서 v-for 循环上方的 v-if 循环中使用 matchingdata.some()를 사용할 수 있습니다. 하단에 v-else를 입력하고 텍스트를 포함하세요.

아래 수정 사항을 확인하세요:

이것을 코드 샌드박스에 붙여넣었더니 메시지가 상자당 한 번만 표시되도록 했습니다.

사용 중인 관련 부품 paints.find 모든 페인트 사전 확인:

문서:

• Array.prototype.some一个>
• Array.prototype.find一个>