Question

我正在通过这样做来学习vue.js，并且正在尝试创建商店定位器。

我有一些具有某些属性的标记（商店），例如名称，以及它是否是“特征”位置（是/否）...

所以我这样做

`<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
     }
}`

我知道这是循环遍历标记，并且仅在它们是精选标记时才显示它们，但是，我真正想要做的是在精选标记之间循环并仅显示前三个标记。我不确定如何这样做，但是我确定我缺少简单的东西。

Answer 1

您可以使用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"条件

返回vue.js中具有给定属性的前3个项目

1 个答案: