Поиск giphy url в листинге v-for (Vue.js)

Question

У меня есть список персонажей фильма, которые я получаю при вызове REST в свой бэкэнд с помощью axios. Я показываю их в загрузочной карточке для каждого персонажа. Я пытаюсь найти в giphy имя персонажа и использовать giphy url в качестве img-src для карты.

Когда я пробую это и загляну внутрь Vue devtools, img-src показывает "обещание".

<template>
  <div class="characters">
    <b-container>
      <b-card-group columns>
        <b-card
          v-for="character in characters"
          v-bind:key="character.id"
          :title="character.name"
          :img-src="getGiphy(character.name)"
          img-alt="Image"
          img-top
          tag="article"
          style="max-width: 20rem;"
          class="mb-2"
        >
          <b-card-text>
            This character is a {{character.role}}
          </b-card-text>
        </b-card>
      </b-card-group>
    </b-container>
  </div>
</template>

Я пытаюсь получить источник изображения с :img-src="getGiphy(character.name)"

@Component
export default class Characters extends Vue {
  public characters: Character[] = [];
  public fields: string[] = ['name', 'role'];

  public async getGiphy(name: string) {
    const giphyApi: string =
      '//api.giphy.com/v1/gifs/search?api_key=xxxxxxxxxxx&limit=1&q=';
    const response = await axios.get(giphyApi + name);
    return response.data.data[0].image_url;
  }

  private async created() {
    const response = await axios.get('/api/characters');
    this.characters = await response.data._embedded.characters;
  }

Answer 1

Vue не может разрешать обещания в свойствах, поэтому вы должны сделать что-то вроде этого.

Шаблон

<b-card
  ...
  :img-src="character.giphyImage"
  ...
>

TS

private async created() {
  ...
  await Promise.all(this.characters.map(async character => {
    character.giphyImage = await this.getGiphy(character.name);
  }));
}