Вернуть первые 3 элемента с данным свойством в vue.js - PullRequest
Новая
       13

Вернуть первые 3 элемента с данным свойством в vue.js

0 голосов
/ 17 апреля 2019

Я изучаю vue.js, пытаясь создать локатор магазина.

У меня есть маркеры (магазины), которые имеют некоторые свойства, такие как имя, и если это «рекомендуемое» местоположение (true / false) ...

поэтому я делаю это 

`<template v-for="featured in featuredLocations"> 
     <div v-if="featured.featured_location == true">
          <Featured 
             :name="featured.name"
             :image="featured.image"
             :facebook="featured.facebook_url"
             :twitter="featured.twitter_url"
             :featuredLocation="featured.featured_location"
          />
     </div>
</template>`

и ... 

`computed: {
     featuredLocations: function(){
          return _.orderBy(this.markers, 'name') // order A-Z
     }
}`

Это, я знаю, циклически перебирает маркеры и отображает их только в том случае, если они являются избранными, однако, что я действительно хочу сделать, так это циклически перебирать избранные маркеры и показывать только первые 3. Я не уверен, как сделай это, но я уверен, что упускаю что-то простое.

1 Ответ

1 голос
/ 17 апреля 2019

Вы можете использовать функцию lodash take: 

computed: {
  featuredLocations: function(){
    let featured = _.filter(_.orderBy(this.markers, 'name'), marker => marker.featured_location)
    return _.take(featured, 3)
  }
}

Примечание: с функцией фильтра для вашего вычисляемого свойства вам больше не нужно условие v-if="featured.featured_location == true"

...