vue 使用axios.post请求json数据后,在setTimeout中放在数组中,并在前台循环显示
时间: 2024-03-20 14:42:57 浏览: 92
vue中axios实现数据交互与跨域问题
好的,我可以帮你解决这个问题。首先,你需要在Vue组件中引入axios库:
```javascript
import axios from 'axios';
```
然后,你可以使用axios.post方法向服务器发送POST请求,将JSON数据作为参数传递给它:
```javascript
axios.post(url, data)
.then(response => {
// 处理响应数据
})
.catch(error => {
// 处理错误
});
```
其中,url是请求的地址,data是要发送的JSON数据。在then回调函数中,你可以处理服务器返回的响应数据。
接下来,你需要将服务器返回的数据放到一个数组中,并在前台循环显示。你可以定义一个数组dataList,然后在then回调函数中将服务器返回的数据push到这个数组中:
```javascript
data() {
return {
dataList: []
};
},
methods: {
loadData() {
axios.post(url, data)
.then(response => {
this.dataList.push(response.data);
})
.catch(error => {
console.log(error);
});
}
}
```
最后,在页面中使用v-for指令循环显示dataList数组中的数据:
```html
<ul>
<li v-for="data in dataList" :key="data.id">{{ data.name }}</li>
</ul>
```
这样就可以将服务器返回的JSON数据放到数组中,并在前台循环显示了。注意,在这个例子中,我假设服务器返回的JSON数据中有一个名为name的属性,你需要根据实际情况修改代码。
阅读全文