在v-for listing（Vue.js）中搜索giphy网址

Question

我有一个电影角色列表，我使用axios从REST调用到后端。我在每个角色的引导卡中显示它们。我正在尝试做的是搜索giphy的字符名称，并使用giphy url作为卡的img-src。

当我尝试这个并查看Vue devtools时，img-src显示“promise”。

<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无法解析属性中的promise，因此您必须执行此类操作。

模板

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