当前位置：首页 > news >正文

vue2/Vue3项目中，通过请求接口来刷新列表中的某个字段（如：Axios）

news 2025/7/20 9:43:04

vue2/Vue3项目中，通过请求接口来刷新列表中的某个字段。可以使用 Vue 的异步请求库（如 Axios）来发送请求，并在请求成功后更新相应的字段。

示例如下（Vue2）：

简单的示例如下，假设列表数据存储在 list 数组中，每个对象都有一个字段 field 需要刷新。示例代码如下：

<template><div><ul><li v-for="item in list" :key="item.id">{{ item.field }}<button @click="refreshField(item.id)">刷新</button></li></ul></div>
</template><script>
import axios from 'axios';export default {data() {return {list: []};},methods: {fetchData() {// 发送请求获取列表数据(示例接口地址)axios.get('/api/list').then(response => {this.list = response.data;}).catch(error => {console.error(error);});},refreshField(itemId) {// 发送请求刷新字段(示例接口地址)axios.put(`/api/item/${itemId}/refresh`).then(response => {// 更新列表中对应项的字段const item = this.list.find(item => item.id === itemId);if (item) {item.field = response.data.field;}}).catch(error => {console.error(error);});}},mounted() {this.fetchData();}
};
</script>

上述代码中，fetchData 方法用于发送请求获取列表数据，将返回的数据存储在 list 数组中。每个列表项都有一个刷新按钮，点击按钮时会调用 refreshField 方法发送请求来刷新对应项的字段。在请求成功后，通过更新 list 数组中对应项的字段来实现刷新。

示例如下（Vue3）：

在 Vue 3 中，可以使用 Composition API （组合式API）来编写相应的代码。下面是使用 Vue 3 和 Composition API 的示例代码：

<template><div><ul><li v-for="item in list" :key="item.id">{{ item.field }}<button @click="refreshField(item.id)">刷新</button></li></ul></div>
</template><script>
import { ref } from 'vue';
import axios from 'axios';export default {setup() {const list = ref([]);const fetchData = () => {// 发送请求获取列表数据axios.get('/api/list').then(response => {list.value = response.data;}).catch(error => {console.error(error);});};const refreshField = (itemId) => {// 发送请求刷新字段axios.put(`/api/item/${itemId}/refresh`).then(response => {// 更新列表中对应项的字段const item = list.value.find(item => item.id === itemId);if (item) {item.field = response.data.field;}}).catch(error => {console.error(error);});};fetchData();return {list,refreshField};}
};
</script>