Как разорвать цикл v-for в vue.js?

Question

Как разорвать цикл v-for в vue.js?

2

У меня есть это v-for loop мое приложение vue.js:

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

Я хочу вырваться из цикла после рендеринга 20 слов. Как я могу это достичь? Я посмотрел документы, но ничего не видел.

Karlom 01 авг. 2017, в 08:04

Источник

Теги:

javascript

vue.js

4 ответа

3

Вы должны создать вычисленное значение для вашего укороченного словаря (например, лучше подготовить данные для рендеринга):

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

...

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

euvl 01 авг. 2017, в 03:52

0

Хорошая точка зрения. Но ради любопытства мне все еще интересно, есть ли способ сделать это на уровне v-for ?
Karlom 01 авг. 2017, в 06:09

0

Для этого сценария это решение работает лучше всего для меня.

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

maswahyu 04 дек. 2018, в 04:56

0

Чтобы сделать это на уровне v-for, создайте объект данных с лимитом и сравните его с индексом для управления v-for с помощью v-if.

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

    <script>
export default{
   data(){
     return{
         limit: 20 }
   }
}
</script>

Dan 25 окт. 2018, в 02:45

Ещё вопросы

Хорошая точка зрения. Но ради любопытства мне все еще интересно, есть ли способ сделать это на уровне v-for ?

cwang · Accepted Answer · 2017-08-01T04-14-00.000Z

вы можете манипулировать массивом до начала цикла

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

это будет работать для массива, но не для объекта. Я бы сам использовал этот метод, если он прост, но если есть больше логики, чем эта, или если это объект, я бы использовал вычисляемый метод.