Vuejs의 v-for에서 v-if 및 v-else를 올바르게 사용하는 방법은 무엇입니까?

Question

으아악

각 체크박스를 클릭하면 박스에서 관련 데이터를 불러와서 배열을 그립니다. 일치하는 데이터를 확인하여. 정렬.

이제 체크박스를 클릭했을 때 데이터를 찾을 수 없으면 "데이터를 찾을 수 없습니다"라는 메시지를 표시하고 싶습니다

아래 코드의 문제점은 v-if를 맨 위에 놓고 v-for 및 v-else 데이터를 맨 끝에 넣으면 데이터가 거의 표시되지 않는다는 것입니다

Answer 1

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는 동일한 논리 블록에 포함되려면 서로 바로 뒤에 나타나야 합니다.

Answer 2

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

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

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

으아악

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

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

으아악

문서:

• Array.prototype.some
• Array.prototype.find