Vue에서 필터링된 목록을 보다 동적으로 만드는 방법

Vue에서 필터링된 목록을 보다 동적으로 만드는 방법

그래서 나는 내가 반복해서 사용하고 있는 항목의 목록을 가지고 있다.v-for. 목록을 인쇄하기 전에 다음 값을 사용하여 필터링한다..filter()방법또한 사용 중인 필터링된 값 간의 변경v-on:click제 질문은, 필터를 좀 더 역동적으로 만들 수 있는 방법이 없을까?목록을 필터링하도록 설정한 미리 정의된 값이 변경되면 필터가 더 이상 작동하지 않기 때문에...

내가 JSFiddle을 여기에 제공했어. 그래서 너는 내가 어떤 일을 하고 있는지 볼 수 있을거야.

나의 두 가지 주요 관심 분야는v-on그리고 계산된 방법들..

<li class="d-flex justify-content-between" v-on:click="engagementFilterKey = 'recieved'">
     <div class="ml-3">
     <span class="text-muted">Received</span>
     </div>
</li>
<li class="d-flex justify-content-between" v-on:click="engagementFilterKey = 'preparation'">
     <div class="ml-3">
     <span class="text-muted">Preparation</span>
     </div>
</li>

여기 계산된 방법이 있다.

computed: {
    engagementFilter() {
      return this[this.engagementFilterKey];
    },
    recieved() {
        return this.allEngagements.filter((engagement) => engagement.status == 'Recieved')
    },
    preparation() {
        return this.allEngagements.filter((engagement) => engagement.status == 'Preparation')
    },

이 토론의 맨 위에 게시한 내용을 확인하십시오.

업데이트됨

아이디어는 일련의 계약에서 고유한 상태 집합을 만들고 버튼 목록을 동적으로 렌더링하는 것이다.각 버튼에 할당됨engagementFilterKey모든 계약 목록에서 일치하는 상태를 필터링하는 데 사용할 수 있다.

솔루션 코드 - JSFiddle

참조URL: https://stackoverflow.com/questions/53012550/how-to-make-filtered-list-more-dynamic-in-vue