Vuejs에서 검색 및 드롭다운 메뉴를 사용하여 배열을 필터링할 때 발생하는 문제

Question

으아악

처음에는 사용자 데이터가 완전히 로드됩니다. 나중에 두 개의 필터(예: 검색 필터용 필터)를 기반으로 모든 사용자 배열에서 배열을 필터링해야 합니다. 둘째, 사용자 배열의 상태를 기반으로 하는 드롭다운의 경우 배열을 필터링해야 합니다.

코드가 제대로 작동하도록 변경하는 방법. 현재는 검색이나 드롭다운에서 배열을 필터링하지 않습니다. 하지만 단지 데이터만 표시할 뿐입니다.

Answer 1

이 예제가 작동하려면 몇 가지 변경이 필요합니다.

먼저 표시된 콘텐츠를 업데이트해야 합니다. 필터링된 목록이 포함된 현재 목록 대신 변수 sourceInfo를 인쇄하는 것이 좋습니다. 따라서 HTML 섹션에 어딘가에 추가하세요

으아악

이렇게 변경한 후에는 sourceInfo의 콘텐츠가 현재 사용되고 있으므로 최종적으로 평가되기 때문에 콘솔에 오류 메시지가 표시되어야 합니다. 메시지 내용은 다음과 같습니다.

으아악

따라서 사용자 목록을 포함하는 실제 변수인 this.userList 更改为 this.users를 변경해야 합니다.

으아악

또 다른 오류가 나타납니다:

으아악

이는 사용자가 텍스트 검색 기준과 일치하는지 확인하고 결과를 반환하기 전에 적용하는 boolean 上应用 sort() 函数，该函数预计由 includes() 函数返回。因此，作为最后一步，删除过滤器的 sort() 섹션에서 가져온 것입니다.

으아악

이제 기본 기능이 작동합니다. 필터 드롭다운 목록을 확인하면 nok，即使一个用户具有相应的状态，也会返回一个空数组。这是因为下拉元素 nok 已分配值 notok 。因此，只需将值更改为 nok에 대한 내용을 확인할 수 있습니다.

으아악

코드를 실행하는 코드샌드박스 링크는 다음과 같습니다: https://codesandbox.io/s/vue-sort-problem-hgdm7?file=/src/comComponents/HelloWorld.vue