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

vue3 ajax获取json数组排序举例

news 2026/2/9 11:51:19

使用`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

数据获取效果如下：
获取20个数据

对`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 已经是排序后的数组。
选择哪种方式取决于你的具体需求和偏好。计算属性适用于需要多次使用的排序逻辑，而方法适用于一次性排序。