Vue.js v-forで表示させたリストで、数件だけ表示させておきボタンをクリックしたら全件見えるようにしたい

Vue.js初心者です。
v-forを使ってデータを一覧で表示させるページを作成しています。

実現したいこと

一覧のうち、最初の5件だけ表示させておき、もっと見るボタンを押したら全件が見えるようにしたい。
ボタンを押したらデータを取得するなどの処理は不要なので、あらかじめ全件取得しておき6件目以降を非表示にしておいて、ボタンを押したら表示させるようにしたい。

該当のソースコード

データは条件によって、リンクがあるものを無いものの出し分けをしています。

vue
1<ul>
2<template v-for="(item, index) in list">
3  <li>
4   <div v-if="条件">~略~</div>
5   <a v-else-if="条件">~略~</a>
6  <li>
7</template>
8</ul>
9<button type="button">もっと見る</button>

試したこと

以下のように、v-showでボタンを押したら表示できるのですが、index < 5の時は初期表示させておく方法がわかりませんでした。

<ul>
<template v-for="(item, index) in list">
<li v-show="isVisible">
~ 略 ~
</li>
</template>
</ul>
<button v-on:click="isVisible = true" v-show="!isVisible" type="button">もっと見る</button>

<script>
  export default {
    data() {
      return{
        isVisible: false
      }
    }
  }
</script>

初心者のため初歩的な部分が分からないせいかと思いますが、
解決方法を教えていただきたいです。

行動規範の内容に同意します

回答1件

ベストアンサー

「computed」でリストの中身を制御してやると、簡単にできるかとおもいます。

javascript
1<template >
2<li v-for="(item, index) in list" :key="index">
3    {{item}}
4</li>
5</template>
6
7<script>
8export default {
9    data() {
10        return{
11            isVisible: false,
12            listBuff: ["a", "b", "c", "d", "e", "f"]  // listの元データ
13        }
14    },
15    computed: {
16        /**
17         * isVisibleによって返却するリスト内容を制御します。
18         */
19        list: {
20            get() {
21                return (this.isVisible) ? this.listBuff : this.listBuff.slice(0, 5)
22            }
23        }
24    }
25}
26</script>
27
28