How to break v-for loop in vue.js?

For this scenario, this solution works best for me.

<div v-for="(word, index) in dictionary" v-if="index <= 20"> 
    <p>{{word}}</p>
</div>

you can manipulate the array before loop start

<div v-for="(word, index) in dictionary.slice(0,20)"> 
    <p>{{word}}</p>
</div>

You have to create a computed value for your truncated dictionary (e.g. it is better to prepare data for rendering):

computed: {
 shortDictionary () {
   return dictionary.slice(0, 20)
 }
}

...

<div v-for="(word, index) in shortDictionary"> 
   <p>{{word}}</p>
</div>

Related