【Vue.js】 조건에 따라 표시할 리스트를 전환하는 샘플 코드

소개

다른 날 이 기사을 썼습니다.

여기에 등장한 코드에 추가하여 조건에 따라 표시할 목록을 전환하는 방법을 설명합니다.

환경

OS: macOS Catalina 10.15.1
Vue: 2.6.10
vue-router: 2.6.10
vuetify: 2.1.0

결론

Sample.vue

<template>
  <v-list>
    <v-list-item
      v-for="item in selectedItems"
      :key="item.id"
      @click="triggerClick(item.action)"
    >
      <router-link :to="{ name: item.link }">
        <v-list-item-title>
          {{ item.name }}
        </v-list-item-title>
      </router-link>
    </v-list-item>
  </v-list>
</template>

<script>
  export default {
    data() {
      return {
        selectedPattern: 1, //ここで条件を切り替える
        items: [
          {id: 1, name: '1へのリンク', link: 'Component1', action: '', pattern: 1},
          {id: 2, name: '2へのリンク', link: 'Component2', action: '', pattern: 2},
          {id: 3, name: 'action1を実行', link: '', action: 'action1', pattern: 1},
          {id: 4, name: 'action2を実行', link: '', action: 'action2',  pattern: 2},
        ]
      }
    },
    computed: {
      /* 
       * filterを使って事前にリストを精査しておく
       * patternが1か2かで表示する内容を変更
       */
      selectedItems(){
        return this.items.filter(item => item.pattern === this.selectedPattern)
      }
    },
    methods: {
      triggerClick(action) {
        if (action === 'action1') {
          anyAction1()
        } else if (action === 'action2') {
          anyAction2()
        }
      }
    }
  }
</script>

이 예에서는 selected를 수동으로 1로 설정했지만,
응용 프로그램으로 Vuex에서 만든 상점에서 state를 호출하고 그에 따라 목록을 전환하는 것과 같은 것도 가능합니다.

※로그인하지 않으면 로그아웃을 표시하지 않는 등.

보충: v-if를 사용하지 않는 이유: 효율 악화

이번 패턴에서는 드디어 v-if와 v-for를 동시에 사용하면 전환 할 수있는 것은? 가 되기 쉽습니다만, 공식 문서에서는 비추천이 되고 있습니다.

v-if와 v-for를 동시에 사용하는 것은 권장되지 않습니다. 자세한 내용은 스타일 가이드를 참조하십시오.

스타일 가이드에 따르면,
v-if와 v-for를 동시에 사용한 경우

다시 렌더링할 때마다 전체 목록을 반복적으로 처리해야 합니다.
computed 속성에서 filter를 사용한 경우

필터링 된 목록은 배열과 관련된 변경 사항이있는 경우에만 재평가되므로 필터링이 훨씬 효율적입니다.

그리기 효율이 나빠져 버립니다

결론

끝까지 읽어 주셔서 감사합니다

누군가의 도움이 되길 바랍니다

참고로 한 사이트 (항상 감사합니다)

【Vue.js】Vue warn: Error in v-on handler: "TypeError: handler.apply is not a function - Qiita

조건부 렌더링 — Vue.js