Vue.js如何实现请求的网格视图

<div id="app">
  <!-- 网格视图内容 -->
</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>
  new Vue({
    el: '#app',
    // 其他Vue选项
  });
</script>

new Vue({
  el: '#app',
  created() {
    axios.get('/api/grid-data') // 发起GET请求
      .then(response => {
        // 处理响应数据
        this.gridData = response.data;
      })
      .catch(error => {
        // 处理错误
        console.error(error);
      });
  },
  data() {
    return {
      gridData: null // 存储网格数据
    };
  }
});

<div id="app">
  <table>
    <thead>
      <tr>
        <th>列1</th>
        <th>列2</th>
        <th>列3</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in gridData" :key="item.id">
        <td>{{ item.column1 }}</td>
        <td>{{ item.column2 }}</td>
        <td>{{ item.column3 }}</td>
      </tr>
    </tbody>
  </table>
</div>