vue3 ajax获取json数组排序举例

使用axios获取接口数据

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

npm install axios -S

接口调用代码举例如下：

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);
    };         
}

后台代码如下：

@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. 使用计算属性排序

<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。

代码示例如下：

<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 已经是排序后的数组。

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

排序效果