Vue JS의 계산된 필터에서 여러 값을 반환합니다.

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>

단, 투고 제목에서 제안하는 대로 목록에서 여러 값을 반환하고 계산 속성을 변경할 수 있습니다.

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

언급URL : https://stackoverflow.com/questions/46025443/return-multiple-values-from-a-computed-filter-in-vue-js