vue.js 2의 v-for 루프에서 v-if를 사용하는 방법

Question

이 코드 설정이 있습니다

으아악

person 对象中的 status 속성의 모든 값은 "공개"입니다!

그러나 위의 스니펫에서는 계속 실행되는 if 块，而是 else 블록이 아닙니다.

다음과 같이 코드를 다시 작성하면:

으아악

그러면 정상적으로 작동됩니다.

첫 번째 영상의 문제점은 무엇인가요?

여기서 "key" 속성이 중요한 역할을 하는 것 같습니다. 제가 사용하는 방식이 잘못된 걸까요? 왜 출력에 영향을 미치나요?

다음 중 "for" 루프 안에 "if" 문을 작성하는 가장 올바른 방법은 무엇인가요?

저는 이전에 제 코드의 다른 루프에서 첫 번째 방법을 사용해 왔고 오늘까지 아무런 문제가 없었습니다. 이와 같은 이상한 동작을 방지하려면 두 번째 방법과 유사하도록 모두 업데이트해야 합니까?

Answer 1

vue v-for 및 v-if

에서

조건 블록에 v-for 和 v-if。问题在于 :key를 올바르게 사용하셨습니다.

어느 쪽이든 div 내부에서 무언가가 렌더링되며 두 가지 가능한 결과가 있으며 키는 v-for 线上。您不应有条件地呈现 :key 속성에 있어야 합니다.

으아아아