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

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

1 个答案: