[Dúvida] Como exibir titulo de episodios Vue.js + Axios | VueJS

Olá gente! Estou fazendo um teste com a API do Rick and Morty, e estou querendo fazer a exibição de uma lista com os nomes dos personagens e os episodios que aparecem, então criei uma função que em teoria deveria buscar os nomes dos episodios (recebidos como parametro) que os personagens aparecem. Mas eu só recebo a quantidade de episodios atraves do v-for na lista e não consigo preencher a lista com os nomes, inclusive o console.log consegue receber os nomes, mas quando deveria aparecer dentro do corpo, não aparece. A função no caso é esta:

methods:{

    buscaEP(ep){
        axios.get(ep).then(episode =>  this.episode = episode.data.name).then(result => {
          console.log(result);
          return result;

    }).catch((err) => {

        console.log(err);

    });
    }

  }

e aqui está um link do codepen para quem quiser dar uma olhadinha na estrutura: https://codepen.io/alexandrebelt/pen/gOdvgvq?editors=1010

Enfim. Existe a possibilidade de fazer essa chamada dos itens? Obrigado desde já!

Oi Alexandre, tudo bem?

Desculpe a demora em retornar.

Fiz alguns testes e cheguei nessa versão atualizada do código que deve buscar corretamente os nomes dos episódios em que os personagens participam:

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rick and Morty Characters</title>
</head>

<body>
    <div class="container">
        <div id="app">
            <ul>
                <li v-for="char in characters" :key="char.id">
                    <p>{{ char.name }}</p>
                    <ul>
                        <li v-for="episode in char.episode" :key="episode">
                            {{ episodes[episode] }}
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="app.js"></script>
    </div>
</body>

</html>

new Vue({
  el: "#app",
  data() {
    return {
      characters: [],
      episodes: {},
    };
  },

  created() {
    axios.get("https://rickandmortyapi.com/api/character").then((response) => {
      this.characters = response.data.results;
      this.loadEpisodeNames();
    });
  },

  methods: {
    loadEpisodeNames() {
      const episodePromises = this.characters.map((char) => {
        return Promise.all(
          char.episode.map((url) =>
            axios.get(url).then((response) => response.data)
          )
        ).then((episodes) => {
          episodes.forEach((episode) => {
            this.$set(this.episodes, episode.url, episode.name);
          });
        });
      });

      Promise.all(episodePromises).catch((err) => {
        console.log(err);
      });
    },
  },
});

Nessa versão atualizada do código, coloquei uma nova propriedade episodes no objeto data do Vue para armazenar os nomes dos episódios com base em suas URLs. O método loadEpisodeNames é responsável por buscar os dados dos episódios e atualizar a propriedade episodes com os nomes correspondentes.

Agora, ao percorrer os episódios em char.episode, podemos usar a propriedade episodes[episode] para exibir o nome do episódio corretamente.

Copiei o código do VSCODE e coloquei no Codepen para você ver como ficou.

Espero que isso resolva o problema e exiba corretamente os nomes dos episódios em que os personagens participam.

Um abraço e bons estudos.