비동기 하위 수집 데이터를 기반으로 한 VueJS 목록 정렬

비동기 하위 수집 데이터를 기반으로 한 VueJS 목록 정렬

저는 다음과 같은 흥미로운 상황이 있습니다.소유자:

• 결과 목록에 대한 웹 서비스 호출을 수행하는 상위 구성 요소(아래)
• 그런 다음 각 결과에 대한 "결과 항목" 구성 요소(v-for)를 렌더링합니다.
• 그런 다음 각 "결과 항목" 구성 요소는 해당 URL에 대한 점수를 얻고 그 옆에 표시하기 위해 여러 웹 서비스 호출을 실행합니다.

기본적으로 구성 요소 트리는 다음과 같습니다.

• 페이지입니다.
  • 결과 항목(다수)
    • x 스코어
    • y 점수
    • z 스코어

지금까지 저는 결과 항목의 웹 URL만 사용하여 점수 구성 요소에 트리를 전달하고 점수 서비스 호출과 데이터를 각 점수 구성 요소에 로컬로 유지할 수 있었습니다.이것은 모든 논리를 잘 구분합니다.

그럼에도 불구하고, 제가 지금 이루고 싶은 것은 다음과 같습니다.

• 결과 항목 v-for는 페이지 구성 요소의 사용자 제어 드롭다운(예: x/y/z 드롭다운 및 asc/desc 드롭다운)을 통해 "x score", "y score", "z score" 비동기식으로 계산된 값을 기준으로 다시 정렬할 수 있습니다.
• 점수 값이 비동기식(즉, 사전 대응적)으로 표시되면 결과 목록에 다시 정렬됩니다.

저는 Vuex를 살펴보았고, 그것이 최선의 접근법인 것처럼 보이지만, 계속 잠수하기 전에 제 생각을 확인하고 사람들이 그것이 실제로 효과가 있을 것이라고 생각하는지 확인하고 싶습니다.

내가 해야 할까요?

• Vuex 저장소를 사용하여 결과 목록 보관
• 변환을 사용하여 초기 결과 목록(ID/url이 있는 개체 목록) 저장
• 페이지 구성 요소에서 "orderedResults"와 같은 계산된 속성을 사용하고 v-for를 사용하여 "결과 항목" 구성 요소를 렌더링합니다.
• 각 채점 성분에 대한 돌연변이를 사용하여 스토어의 각 결과 항목에 점수를 추가합니다(프로브:set새 프롭의 반응성을 보장하는 방법).그리고 이것은 제가 결과 항목의 ID와 새로운 점수를 전달한 다음 그것을 찾고 수정하기 위해 id별로 결과 항목을 조회해야 한다는 것을 의미합니까? 아니면 제가 소품을 통해 주어진 결과 항목의 ref를 돌연변이 페이로드에 통과시켜 돌연변이 함수에 직접 사용할 수 있습니까?

이게 최선의 방법입니까?갓챠는?감사합니다!

모두 당신이 제안한 대로입니다.그러나 각 결과 항목에 점수를 추가하려면 결과 항목의 배열을 사용해야 합니다.set제 생각에는 다음과 같습니다..push반응성과 명확성을 보장하는 가장 좋은 방법입니다.

ref에 의해 객체를 비교하는 것은 vuex에 있을 때도 작동합니다.여기서 테스트했습니다. https://jsfiddle.net/posva/6w3ks04x/

언급URL : https://stackoverflow.com/questions/46100983/vuejs-list-ordering-based-on-async-child-gathered-data