我从服务器中获取用户数据，按年龄顺序排序。当用户数据传递给子组件时，它不显示按v-data表中年龄的下降顺序排序的数据，当我刷新页面时，它显示按降序排序的数据。请帮我找出我做错的地方。我正在使用vuetify版本2.3.10
在父组件中从服务器获取数据时，如下所示:
[{full_name: 'James Ross', city: 'Toronto', age: 45 },{full_name: 'Stacey Purkis', city: 'Calgary', age: 32 }, {full_name: 'Jazz Alzo', city: 'London', age: 24 }]
当子组件第一次加载时，用户数据如下:
[{full_name: 'Stacey Purkis', city: 'Calgary', age: 32 }, {full_name: 'Jazz Alzo', city: 'London', age: 24 }, {full_name: 'James Ross', city: 'Toronto', age: 45 }]
基本上没有排序当我刷新页面时子组件中的用户数据显示完成
[{full_name: 'James Ross', city: 'Toronto', age: 45 },{full_name: 'Stacey Purkis', city: 'Calgary', age: 32 }, {full_name: 'Jazz Alzo', city: 'London', age: 24 }]
父组件
<template>
<div>
<Users :users="users"></Users>
</div>
</template>
<script>
import Users from 'views/lawyers/_users_table.vue';
export default {
components: {
Users
},
data: () => ({
users: [],
}),
created: function() {
this.fetchUsers();
},
methods: {
fetchUsers() {
this.$axios.get('/users.json')
.then(response => {
this.users = response.data;
})
}
}
};
</script>
childcomponent
<template>
<div>
<v-data-table
:headers="headers"
:items="users"
:disable-pagination="true"
v-model="users"
hide-default-footer
class="elevation-1"
>
<template slot="item" slot-scope="props">
<tr>
<td class="full-name">{{ props.item.full_name }}</td>
<td class="summary">{{ props.item.address}}</td>
<td class="experience">{{ props.item.age }} years</td>
</tr>
</template>
</v-data-table>
</div>
</template>
<script>
export default {
props: ['users'],
data: () => ({
headers: [
{ text: 'Name', value: 'full_name', sortable: false },
{ text: 'Address', value: 'address', sortable: false },
{ text: 'Age',value: 'age' }
]
}),
};
</script>
保证它安全的最好方法是在数据表中设置排序:
<v-data-table
:sort-by="['age']"
:headers="headers"
:items="users"
:disable-pagination="true"
v-model="users"
hide-default-footer
class="elevation-1"
>
(更新)
要完成Václav Procházka的答案，您还可以提供sort-desc来强制它是递减的。
另外，从v2开始，直接改变props是一个反模式。理想的方法是克隆它，或者使用如下所示的计算属性。
使用this.$emit('update:usersProp', val)将尝试更新父组件上的道具，因此您的父组件应该看起来像<Users :usersProp.sync="users"></Users>，或者如果您使用this.value和this.$emit(input, val)，则可以使用<Users v-model="users"></Users>。文档在这里和这里
new Vue({
el: '#app',
vuetify: new Vuetify(),
props: {
usersProp: {
default: () => {
return [
{full_name: 'Stacey Purkis', city: 'Calgary', age: 32 },
{full_name: 'Jazz Alzo', city: 'London', age: 24 },
{full_name: 'James Ross', city: 'Toronto', age: 45 }
]
}
}
},
data: () => ({
headers: [
{ text: 'Name', value: 'full_name', sortable: false },
{ text: 'Address', value: 'address', sortable: false },
{ text: 'Age',value: 'age' }
],
}),
computed: {
users: {
get () {
return this.usersProp
},
set (val) {
this.$emit('update:usersProp', val)
}
}
}
})<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="app">
<v-app>
<v-main>
<v-container>
<v-data-table
:headers="headers"
:items="users"
:sort-by="['age']"
:sort-desc="true"
:disable-pagination="true"
v-model="users"
hide-default-footer
class="elevation-1"
></v-data-table>
</v-container>
</v-main>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
</body>
</html>