javascript - Return multiple values from a computed filter in Vue JS - Stack Overflow

admin管理员组

文章数量:1392066

I have a search box where when the user inputs an artist name and it shows a list of artists that match the user input.

I want to display the artist image next to the artist name in the search.

I have an object that contains the following. Artist Name as key and path to image as value

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

I have a puted property that filters the artists name for search.

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

},

and in my template I'm iterating throgh the values

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

I can't find a way to manage that with puted values. I can easily iterate over my object and display both Artist name and Artist image but can't filter it.

Thanks in advance

I have a search box where when the user inputs an artist name and it shows a list of artists that match the user input.

I want to display the artist image next to the artist name in the search.

I have an object that contains the following. Artist Name as key and path to image as value

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

I have a puted property that filters the artists name for search.

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

},

and in my template I'm iterating throgh the values

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

I can't find a way to manage that with puted values. I can easily iterate over my object and display both Artist name and Artist image but can't filter it.

Thanks in advance

• javascript
• vue.js
• vuejs2

Share Improve this question Follow asked Sep 3, 2017 at 16:19 Qais Abou JaoudéQais Abou Jaoudé 62711 gold badge88 silver badges1717 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

If you want to stick to your data structure then there are a number of ways you could manage to display the image along with the matching artists. Since you are essentially getting a list of keys to your artistList object in your puted property, you can use that key to get the path using artistList[artist].

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

However, if you want to instead, as you suggest in the title of your post, return multiple values from the list, then you can alter the puted property.

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

Here the puted property is finding all the matches and then creating a new object containing the name and image path. Use it in the template like so:

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

Of course, you can also choose a different data structure as well. Why not use use an array of artist objects?

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

In which case your puted property simply bees

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

本文标签： javascriptReturn multiple values from a computed filter in Vue JSStack Overflow