はじめに

先日、こちらの記事を書きました。

ここで登場したコードに追記して、条件に応じて表示するリストを切り替える方法について記載します。

環境

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を使っていた場合

フィルタリングされたリストは配列に関連する変更があった場合にのみ再評価されるので、フィルタリングがはるかに効率的になります。

描画効率が悪くなってしまうんですね

おわりに

最後まで読んで頂きありがとうございました

どなたかの参考になれば幸いです

参考にさせて頂いたサイト（いつもありがとうございます）