Vue.js contentful 配列をfor文で指定の回数ループさせて表示させる

Question

現在Nuxt.jsでcontentfulからAPIで取得した投稿を件数を指定して表示させたいと思っています。
データの取得はできていて、全件表示は①の記述でできます。
今回詰まっているところは、取得した情報を4件だけ表示させたいのですが、そこがうまくいっていないです。
試したコードは②です。
原因は恐らく配列は0から読み込むのに対し、v-forのiが1、２、３、４となっているからだと思うのですが、
iに0を含めるやりかたが調べても出てこないのですが、そもそも0を含めることができないのでしょうか？
ご教授いただけるとありがたいです。

①

<div v-for="work in works" :key="work.id">
{{work}}
</div>

②

<div v-for="i in 4" :key="i">
{{works[i]}}
</div>

Comments

[退会済みユーザー]

普通にvueの基礎を読んだ方がいいです。参考ソースを貼っときます。
index.htmlで保存して開いてください。
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<div>ObjectのArrayのループ</div>
<div v-for="work in works" :key="work.id">
works: {{work.value}}
</div>
<div>数字のArrayのループ</div>
<div v-for="value in a">
a: {{value}}
</div>
<div>数字のArrayのループ。番号付き</div>
<div v-for="value, i in a">
a[{{i}}]: {{value}}
</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
works: [
{ id: 0, value: 1 },
{ id: 1, value: 2 },
{ id: 2, value: 3 },
{ id: 3, value: 4 },
],
a: [1,2,3,4],
},
})
</script>

Answer 1

やり方はいくつか存在しますが、とりあえず以下のような感じで動きます。

<div v-for="work in works.slice(0, 4)" :key="work.id">
{{work}}
</div>