Return vue.js 中给定属性的前 3 项

Question

我正在边做边学 vue.js，我正在尝试制作商店定位器。

我的标记（商店）具有一些属性，例如名称，如果它是 'featured' 位置 (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 个。我不确定如何做到这一点，但我确定我遗漏了一些简单的东西。

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" 条件

Return vue.js 中给定属性的前 3 项

Return the first 3 items that have a given property in vue.js

limit

vue.js

v-for

Return vue.js 中给定 属性 的前 3 项

Return the first 3 items that have a given property in vue.js

limit

vue.js

v-for

Return vue.js 中给定属性的前 3 项