vue3 如何让 axios 请求的数据显示在页面上？

站长

2024年07月07日 09:44 · 阅读数 6

我让 chatgpt 给了我一段『vue3 axios demo代码』

<template>
  <div>
    <h1>Vue3 Axios Demo</h1>
    <button @click="fetchData">Fetch Data</button>
    <ul>
      <li v-for="item in data" :key="item.id">{{ item.title }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';
import { reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      data: [],
    });

    const fetchData = async () => {
      const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
      state.data = response.data;
    };

    return {
      fetchData,
      data: state.data,
    };
  },
};
</script>

vue3 如何让 axios 请求的数据显示在页面上？

而且 chatgpt 说，响应数据会显示在页面上

但是这个响应的数据，不会显示在页面上，需要做什么修改？

vue3 如何让 axios 请求的数据显示在页面上？

回复

1个回答

test

2024-07-07

<template>
  <div>
    <h1>Vue3 Axios Demo</h1>
    <button @click="fetchData">Fetch Data</button>
    <ul>
      <li v-for="item in state.data" :key="item.id">{{ item.title }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';
import { reactive } from 'vue';
export default {
  setup() {
    const state = reactive({
      data: [],
    });
  
    const fetchData = async () => {
      const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
      console.log(response.data)
      state.data = response.data;
    };

    return {
      fetchData,
      state
    };
  },
};
</script>

这样写或者这样写也可以:

<template>
  <div>
    <h1>Vue3 Axios Demo</h1>
    <button @click="fetchData">Fetch Data</button>
    <ul>
      <li v-for="item in data" :key="item.id">{{ item.title }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';
import { reactive,toRefs } from 'vue';
export default {
  setup() {
    const state = reactive({
      data: [],
    });
  
    const fetchData = async () => {
      const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
      console.log(response.data)
      state.data = response.data;
    };

    return {
      fetchData,
      ...toRefs(state)
    };
  },
};
</script>

setup注意点：

由于在执行 setup函数的时候，还没有执行 Created 生命周期方法，所以在 setup 函数中，无法使用 data 和 methods 的变量和方法

回复

适合作为回答的

经过验证的有效解决办法
自己的经验指引，对解决问题有帮助
遵循 Markdown 语法排版，代码语义正确

不该作为回答的

询问内容细节或回复楼层
与题目无关的内容
“赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容