从Vue JS中的计算过滤器返回多个值

Question

我有一个搜索框，当用户输入一个艺术家名称时，它会显示一个与用户输入相匹配的艺术家列表。

我想在搜索中显示艺术家的名字旁边的艺术家形象。

我有一个包含以下内容的对象。艺术家名为钥匙，形象之路为价值

Radiohead: 'path_to_image',
Elliott Smith:'path_to_image'

我有一个计算属性，可以过滤艺术家的名字进行搜索。

computed: {
filteredArtists() {
  return Object.keys(this.artistsList).filter((artist) => {
    return artist.match(this.artistName)
  }) 
}

},

在我的模板中，我使用这些值迭代

<ul class="searchFliter" v-for="artist in filteredArtists">
  <li v-text="artist"></li>
</ul>

我找不到用计算值来管理这个问题的方法。我可以轻松地迭代我的对象，并显示艺术家的名字和艺术家的形象，但不能过滤它。

提前感谢

Answer 1

如果您想要坚持您的数据结构，那么有许多方法，您可以设法显示图像与匹配的艺术家。由于实际上是在计算属性中获取artistList对象的键列表，所以可以使用该键来使用artistList[artist]获取路径。

<ul class="searchFliter" v-for="artist in filteredArtists">
  <li>{{artist}} <img :src="artistList[artist]"></li>
</ul>

但是，如果您想要像您在文章标题中建议的那样，从列表中返回多个值，则可以更改计算的属性。

filteredArtists() {
  let matches = return Object.keys(this.artistsList).filter((artist) => {
    return artist.match(this.artistName)
  }) 

  return matches.map(m => ({name: m, imagePath: this.artistsList[m]}))
}

在这里，计算属性查找所有匹配项，然后创建一个包含名称和图像路径的新对象。在模板中使用，如下所示：

<ul class="searchFliter" v-for="artist in filteredArtists">
  <li>{{artist.name}} <img :src="artist.imagePath"></li>
</ul>

当然，您也可以选择不同的数据结构。为什么不使用一系列艺术家的物品呢？

[
  {name: "Radiohead", imagePath: "path to image"},
  {name: "Elliott Smith", imagePath: "path to image"}
]

在这种情况下，计算的属性就会变成

filteredArtists() {
  return this.artistsList.filter(m => m.name.match(this.artistName))
}