每页行数定位不正确

Question

每页行数不能正常工作，它位于右侧，我该如何解决？首先，它没有显示，然后我添加了，然后在控制台中显示了警告，然后我添加了app-data =“ true”，然后修复了该问题，但是下拉菜单无法正常工作。

<template>
    <div app-data="true">
        <v-app id="app">
            <v-content>
                <v-card>
                    <v-card-title>
                    Nutrition
                    <v-spacer></v-spacer>
                    <v-text-field
                        v-model="search"
                        append-icon="search"
                        label="Search"
                        single-line
                        hide-details
                    ></v-text-field>
                    </v-card-title>
                    <v-data-table
                    :headers="headers"
                    :items="desserts"
                    :search="search"
                    >
                    <template v-slot:items="props">
                        <td>{{ props.item.name }}</td>
                        <td class="text-xs-right">{{ props.item.calories }}</td>
                        <td class="text-xs-right">{{ props.item.fat }}</td>
                        <td class="text-xs-right">{{ props.item.carbs }}</td>
                        <td class="text-xs-right">{{ props.item.protein }}</td>
                        <td class="text-xs-right">{{ props.item.iron }}</td>
                    </template>
                    <template v-slot:no-results>
                        <v-alert :value="true" color="error" icon="warning">
                        Your search for "{{ search }}" found no results.
                        </v-alert>
                    </template>
                    </v-data-table>
                </v-card>
            </v-content>
        </v-app>
    </div>
</template>