如何在客户端对惯性数据进行排序

route::get('/', function() { return inertia('foo', ['data' => Model::all()]) });

<template>
<ul> 
<li v-for="item in data">{{item.name}}</li>
</ul>
</template>
<script setup>
defineProps({ data: Object })
</script>

<li v-for="Object(data).sort((a, b) => b.score - a.score)">

Proxy {0: {…}, 1: {…}, 2: {…}, 3: {…}, 4: {…}, 5: {…}, 6: {…}, 7: {…}, 8: {…}, 9: {…}, 10: {…}, 11: {…}, 12: {…}, 13: {…}, 14: {…}, 15: {…}, 16: {…}}
[[Handler]]: Object
[[Target]]: Object
0: {id: 1, user: null, name: 'foobar', score: 0, …}
1: {id: 2, user: null, name: 'baz', score: 10, …}

<script setup>
import { ref, computed } from "vue";
const props = defineProps({ data: Object });
const sortByScore = ref(true);
const sortBy = computed(() => (sortByScore.value ? "score" : "name"));
const sortedData = computed(() =>
Object.values(props.data).sort((a, b) => b[sortBy.value] - a[sortBy.value])
);
</script>

并将sortByScore链接到复选框。

我不喜欢在控制器中处理.value，所以我会把它写为：

import { reactive, computed, toRefs } from "vue";
const props = defineProps({ data: Object });
const state = reactive({
sortByScore: true,
sortBy: computed(() => (state.sortByScore ? "score" : "name")),
sortedData: computed(() =>
Object.values(props.data).sort((a, b) => b[state.sortBy] - a[state.sortBy])
),
});

// expose state, so you don't have to use `state.sortedData` in `<template>`
const { sortByScore, sortBy, sortedData } = toRefs(state);

我发现reactive()语法更干净，尤其是在大型控制器中
此语法的另一个优点是您可以只使用一个接口键入状态。

我看到其他人做的另一件事是将state命名为S，而不再为<template>打开包装。只需将其用作S.sortByScore、S.sortedData等即可。
这样，您就不必重新键入所有想要公开的密钥。有时我希望<script setup>中有一个return {...toRefs(state)}的等价物。

注意：以上操作将数据从Object转换为Array。这是保证元素顺序的唯一方法。对象道具在JavaScript中无法可靠排序。

<script setup>
import { computed } from 'vue'
const props = defineProps({ data: Object })
const sortedData = computed(() => Object(props.data.value).sort((a, b) => b.score - a.score))
</script>