从数组获取中获取多个值

Question

我正在向一个 api 发送一个 get 请求，其中值在一个数组中。

我想同时获取多个值。 除了使用索引来获取特定的键值，我还能如何做到这一点？

例如下面，我想要results.data.message.body.artist_list.[4].artist.artist_name 的每个结果，但不想使用索引[4]。

methods: {
   fetchMusic(e) {
     if (e.key === 'Enter') {
       // eslint-disable-next-line no-undef
       axios.get('  ... ', {
          headers: {
            'Access-Control-Allow-Origin': '*',
          },
        })
          .then((response) => response).then(this.setResults);
      }
    },
    setResults(results) {
      this.artists = results.data.message.body.artist_list.[4].artist.artist_name;
      this.artistname = results.data.message.body.artist_list[0].artist.artist_name;
    },
  },
};
</script>

感谢您对我的代码的任何输入

Answer 1

这是一个关于如何获取 API 并通过在项目上循环显示其信息的示例：https://codesandbox.io/s/lucid-currying-nsoo3?file=/src/App.vue

基本上，得到结果（一个数组），然后循环这个数组的每次迭代，并相应地显示所需的数据，例如

<div v-for="result in fetchedResults" :key="result.id">
  <p>
    <span>Name: {{ result.username }}</span> ~
    <span>email: {{ result.email }}</span>
  </p>
</div>

顺便说一句，不要忘记key，这很重要。关于这一点的更多信息here。
how to loop on an array上的官方文档示例。