Javascript 从Vue JS中的计算筛选器返回多个值

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

我想在搜索中显示艺术家姓名旁边的艺术家图像

我有一个包含以下内容的对象。艺术家名称作为键，图像路径作为值

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>

我找不到一种方法用计算值来管理它。我可以轻松地迭代我的对象，并显示艺术家名称和艺术家图像，但不能过滤它

---

提前感谢

如果您想坚持使用数据结构，那么您可以通过多种方式与匹配的艺术家一起显示图像。由于基本上是在计算属性中获取

artistList

对象的键列表，因此可以使用该键使用

artistList[artist]

获取路径

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

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

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

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

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

---

这很好用。谢谢。我还有一个问题，如果我在

@QaisAbouJaoudé中使用v-text显示文本，为什么这不起作用？您是如何尝试显示它的？v-text=what？v-text=“artist”@QaisAbouJaoudé在答案中的所有选项中，

artist

是一个对象，您需要使用

v-text

中的属性，如

v-text=“artist.name”

。但是我想不出你为什么会使用

v-text

。啊哈。非常感谢。我是Vue.js的新手，所以我不确定什么是最好的。但是我发现使用v-text比在html标记之间放东西更干净

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

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