vue3 axios 如何将接口的结果赋值到数组内容
时间: 2024-09-18 10:13:28 浏览: 85
在 Vue3 中使用 Axios 发送请求并将接口返回的数据赋值给数组的内容,你可以按照以下步骤操作:
1. 首先,在你的组件中引入 Axios,通常我们会通过 `import` 导入它:
```javascript
import axios from 'axios';
```
2. 定义一个数据属性来存储你的数组:
```html
<template>
<div>
<ul ref="itemList">
<!-- 数组元素将会在这里渲染 -->
</ul>
</div>
</template>
<script setup>
const axios = inject('axios'); // 如果你在组件内注入 Axios,可以使用这种方法
let items = []; // 初始化一个空数组
</script>
```
3. 使用 Axios 的 `get` 或者其他合适的方法发送请求,并在响应拦截器中处理数据:
```javascript
const fetchData = async () => {
try {
const response = await axios.get('your-api-url');
items = response.data; // 将接口返回的数据赋值给数组items
// 更新视图
this.$nextTick(() => {
this.$refs.itemList.innerHTML = ''; // 清空列表
response.data.forEach((item) => { // 遍历新数据并添加到列表中
this.$refs.itemList.append(
`<li>${item.title}</li>` // 这里假设你的数据结构包含一个'title'字段
);
});
});
} catch (error) {
console.error(error);
}
};
```
4. 调用 `fetchData` 函数来获取数据:
```javascript
onMounted(() => {
fetchData();
});
```
5. 如果需要在某个事件触发后更新数据,也可以在相应的函数中调用 `fetchData`。
阅读全文
相关推荐


















