vue3 ajax获取json数组排序举例

使用axios获取接口数据

可以在代码中安装axios包,并写入到package.json文件:

bash 复制代码
npm install axios -S

接口调用代码举例如下:

javascript 复制代码
const fetchScore = async () => {
    try {
        const res = await axios.get(`http://127.0.0.1:8000/score/${userInput.value}`);
        if (res.status !== 200) return;
        data.value = res.data;
    } catch (error) {
        console.log(error);
    };         
}

后台代码如下:

python 复制代码
@app.get("/score/{count}")
def get_score(count: int):
    if count <= 0: return {}
    result = []
    for i in range(count):
        result.append({"number": i+1, "score": random.uniform(0.0, 100.0)})
    return result 

数据获取效果如下:

json数组进行排序

Vue 3 中对数据进行排序,可以通过在组件的 setup 函数中定义一个计算属性或方法来实现。

1. 使用计算属性排序

javascript 复制代码
<script setup>
import AppLayout from '../components/AppLayout.vue';
import axios from 'axios';
import { ref, computed } from 'vue';

const data = ref([]);
const userInput = ref('')

const sortedData = computed(() => {
  return data.value.slice().sort((a, b) => b.score - a.score);
});

const fetchScore = async () => {
    try {
        const res = await axios.get(`http://127.0.0.1:8000/score/${userInput.value}`);
        if (res.status !== 200) return;
        data.value = res.data;
    } catch (error) {
        console.log(error);
    };         
}
</script>

<template>
    <AppLayout>
      <h1>Score</h1>
      <div>
        <label for="user-input">Enter a number:</label>
        <input id="user-input" v-model.number="userInput" type="number" placeholder="Type a number...">
      </div> 
      <button @click="fetchScore">Fetch Score</button>     
      <p v-if = "data.length > 0">Score list:</p>
      <ul v-if="data.length > 0">
        <li v-for="item in data" :key="item.number">{{ item.number + ": " + item.score }}</li>
      </ul>
      <p v-if="sortedData.length > 0">Sorted Score list:</p>
      <ul v-if="sortedData.length > 0">
        <li v-for="item in sortedData" :key="item.number">{{ item.number + ": " + item.score }}</li>
      </ul>
    </AppLayout>
</template>

2. 直接修改ajax方法所获得的数据

以上述代码为例,可以在 fetchScore 方法中对数据进行排序后再赋值给 data

代码示例如下:

javascript 复制代码
<script setup>
import AppLayout from '../components/AppLayout.vue';
import axios from 'axios';
import { ref } from 'vue';

const data = ref([]);

const fetchScore = async () => {
  try {
    const res = await axios.get(`http://127.0.0.1:8000/score/${userInput.value}`);
    if (res.status !== 200) return;
    data.value = res.data.sort((a, b) => a.score - b.score);
  } catch (error) {
    console.log(error);
  }
}
</script>

<template>
  <AppLayout>
    <h1>Score</h1>
    <button @click="fetchScore">Fetch Score</button>
    <p v-if="data.length > 0">Sorted score list:</p>
    <ul v-if="data.length > 0">
      <li v-for="item in data" :key="item.number">{{ item.number + ": " + item.score }}</li>
    </ul>
  </AppLayout>
</template>

3. 方法比较

  • 计算属性:

sortedData 是一个计算属性,它返回 data 数组的一个排序副本。使用 slice() 方法是为了避免直接修改原始数组。

在模板中使用 sortedData 而不是 data,这样每次 data 变化时,sortedData 都会自动重新计算。

  • 直接修改方法:

fetchScore 方法中,获取数据后直接对其进行排序,并将排序后的结果赋值给 data

在模板中直接使用 data,因为 data 已经是排序后的数组。

选择哪种方式取决于你的具体需求和偏好。计算属性适用于需要多次使用的排序逻辑,而方法适用于一次性排序。

排序效果

相关推荐
AA-代码批发V哥12 小时前
Ajax之核心语法详解
ajax
小李飞飞砖14 小时前
OkHttp 的拦截器有哪些
okhttp
面朝大海,春不暖,花不开1 天前
结构化数据格式解析:JSON 与 XML 的技术应用与实践
xml·json
PythonicCC1 天前
Django核心知识点详解:JSON、AJAX、Cookie、Session与用户认证
ajax·django·json
-凌凌漆-2 天前
【Qt】Qt QML json处理
开发语言·qt·json
居然是阿宋2 天前
【学习笔记】OkHttp源码架构解析:从设计模式到核心实现
笔记·学习·okhttp
racerun2 天前
UniApp中的pages.json 和 tabBar
uni-app·json
我命由我123452 天前
前端开发问题:SyntaxError: “undefined“ is not valid JSON
开发语言·前端·javascript·vue.js·json·ecmascript·js
Code季风2 天前
将 gRPC 服务注册到 Consul:从配置到服务发现的完整实践(上)
数据库·微服务·go·json·服务发现·consul
gzzeason3 天前
Ajax:现代JS发起http通信的代名词
前端·javascript·ajax