Vue.jsでforを行う方法【new Vue】

new Vueでvue.jsを使う場合のやり方です。
axiosを使っていますが、ajax,fetch好きなのを使ってください。

forを行う方法

v-forを使ってループすることができます。

<div id="app">
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
// APIからデータを取得
new Vue({
  el: '#app',
  data: {
    items: [],
  },
  mounted() {
    axios.get('https://example.com/api/items')
      .then((response) => {
        this.items = response.data;
      })
      .catch((error) => {
        console.error('API呼び出し中にエラーが発生しました:', error);
      });
  }
});
</script>

ローディング状態の管理

new Vue({
  el: '#app',
  data: {
    items: [],
    isLoading: true // ローディング状態を追加
  },
  mounted() {
    axios.get('https://example.com/api/items')
      .then((response) => {
        this.items = response.data;
        this.isLoading = false; // データ取得後、ローディング状態を解除
      })
      .catch((error) => {
        console.error('API呼び出し中にエラーが発生しました:', error);
        this.isLoading = false; // エラー発生時もローディング状態を解除
      });
  }
});

<div id="app">
  <div v-if="isLoading">データを読み込み中...</div>
  <ul v-else>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
</div>