vue2/Vue3项目中,通过请求接口来刷新列表中的某个字段(如:Axios)

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

  1. 示例如下(Vue2):

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

javascript 复制代码
<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 数组中对应项的字段来实现刷新。

  1. 示例如下(Vue3):

在 Vue 3 中,可以使用 Composition API (组合式API)来编写相应的代码。下面是使用 Vue 3 和 Composition API 的示例代码:

javascript 复制代码
<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>

在这个示例中,我们使用了 ref 函数来创建响应式的 list 数组。fetchData 函数和 refreshField 函数被定义在 setup 函数中,并通过 return 导出,使它们能在模板中使用。

注意:由于 Vue 3 使用了 Composition API,所以代码中不再使用 datamethods 等选项,而是使用了函数式的 setup。在 setup 函数中,我们定义了需要用到的数据和方法,并将它们返回以在模板中使用。

可根据实际需求进行适当的修改和调整,仅提供思路~

相关推荐
Poetry2372 分钟前
大屏数据可视化适配方案
前端
遂心_11 分钟前
用React Hooks + Stylus打造文艺范的Todo应用
前端·javascript·react.js
轻语呢喃15 分钟前
<a href=‘ ./XXX ’>,<a href="#XXX">,<Link to="/XXX">本质与区别
前端·react.js·html
用户38022585982415 分钟前
vue3源码解析:watch的实现
前端·vue.js·源码
F2E_Zhangmo19 分钟前
第一章 uniapp实现兼容多端的树状族谱关系图,创建可缩放移动区域
前端·javascript·uni-app
鹏程十八少20 分钟前
3. Android 第三方框架 Okhttp, Retrofit 的动态代理和适配器模式深度解读三
前端
阿怼丶20 分钟前
🚶‍♂️基于 Three.js 的自定义角色漫游系统实战:支持碰撞检测与动画控制
前端·three.js
写字楼里看日出22 分钟前
Electron入门教程:零基础手把手教你将网页打包成桌面应用
前端·javascript
JohnYan22 分钟前
Bun技术评估 - 16 Debug
javascript·后端·debug
张志鹏PHP全栈24 分钟前
TypeScript 第七天,TypeScript和webpack如何搭配使用
前端·typescript