这是tool.vue文件
<template>
<LoadingView :loading="initialLoading">
<Heading :level="1" class="mb-3 flex items-center">
<span>Adverts</span>
</Heading>
<div class="flex mb-6">
<IndexSearchInput
:placeholder="searchPlaceholder"
/>
<div class="w-full flex items-center" >
<!-- Create / Attach Button -->
<CreateResourceButton
:label="createButtonLabel"
:singular-name="singularName"
:resource-name="resourceName"
class="flex-shrink-0 ml-auto mb-6"
/>
</div>
</div>
<Card>
<ResourceTableToolbar>
</ResourceTableToolbar>
<LoadingView :loading="loading">
<table class="w-full divide-y divide-gray-100 dark:divide-gray-700"
data-testid="resource-table">
<thead class="bg-gray-50 dark:bg-gray-800">
<tr>
<th class="td-fit uppercase text-xxs text-gray-500 tracking-wide pl-5 pr-2 py-2"><span class="sr-only">Selected Resources</span></th>
<th class="text-left px-2 whitespace-nowrap uppercase text-gray-500 text-xxs tracking-wide py-2">ID</th>
<th class="text-left px-2 whitespace-nowrap uppercase text-gray-500 text-xxs tracking-wide py-2">Headline</th>
<th class="text-left px-2 whitespace-nowrap uppercase text-gray-500 text-xxs tracking-wide py-2">Start Date</th>
<th class="text-left px-2 whitespace-nowrap uppercase text-gray-500 text-xxs tracking-wide py-2">End Date</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-100 dark:divide-gray-700">
<tr class="group" v-for="(item, index) in items" :key="index">
<td class="py-2 cursor-pointer td-fit pl-5 pr-5 dark:bg-gray-800 group-hover:bg-gray-50 dark:group-hover:bg-gray-900"><input type="checkbox" class="checkbox" aria-label="Select Resource 1" data-testid="adverts-items-0-checkbox" dusk="1-checkbox"></td>
<td class="px-2 py-2 whitespace-nowrap cursor-pointer dark:bg-gray-800 group-hover:bg-gray-50 dark:group-hover:bg-gray-900">
<div class="text-left"> <span class="whitespace-nowrap">{{ item.id }}</span></div>
</td>
<td class="px-2 py-2 whitespace-nowrap cursor-pointer dark:bg-gray-800 group-hover:bg-gray-50 dark:group-hover:bg-gray-900">{{ item.headline }}</td>
<td class="px-2 py-2 whitespace-nowrap cursor-pointer dark:bg-gray-800 group-hover:bg-gray-50 dark:group-hover:bg-gray-900">{{ item.start_date }}</td>
<td class="px-2 py-2 whitespace-nowrap cursor-pointer dark:bg-gray-800 group-hover:bg-gray-50 dark:group-hover:bg-gray-900">{{ item.end_date }}</td>
</tr>
</tbody>
</table>
<pagination-links
v-if="resourceResponse"
:resource-name="resourceName"
:resources="resources"
:resource-response="resourceResponse"
@previous="selectPreviousPage"
@next="selectNextPage">
</pagination-links>
</LoadingView>
</Card>
</LoadingView>
</template>
<script>
import axios from 'axios';
import { Paginatable, PerPageable } from 'laravel-nova';
export default {
mixins: [
Paginatable,
PerPageable
],
data() {
return {
items: [],
initialLoading: true,
loading:false,
createButtonLabel: 'Create New Advert',
searchPlaceholder: 'Search Adverts',
singularName: 'Advert',
resourceName: 'Adverts',
};
},
mounted() {
this.getAdverts();
},
methods: {
getAdverts() {
this.initialLoading = false;
this.loading = true;
axios.get('/nova-vendor/manager/index')
.then(response => {
this.items = response.data;
this.loading = false;
})
.catch(error => {
console.log(error);
});
},
computed: {
/**
* Return the heading for the view
*/
headingTitle() {
if (this.initialLoading) {
return ' '
} else {
return 'Adverts'
}
},
}
}
}
</script>
<style>
/* Your custom styles here */
</style>
我被告知如下:
1在文件顶部导入Paginatable mixin:import { Paginatable } from 'laravel-nova';
2将Paginatable mixin添加到mixins数组中:mixins: [ Paginatable]
3修改getAdverts方法以使用Paginatable mixin提供的paginate方法:
getAdverts() {
this.initialLoading = false;
this.loading = true;
this.paginate(axios.get('/nova-vendor/manager/index'))
.then(response => {
this.items = response.data;
this.loading = false;
})
.catch(error => {
console.log(error);
});
}
4将分页链接组件添加到模板中:
<pagination-links
v-if="resourceResponse"
:resource-name="resourceName"
:resources="resources"
:resource-response="resourceResponse"
@previous="selectPreviousPage"
@next="selectNextPage">
</pagination-links>```
但它不工作,我得到以下错误:
./resources/js/pages/Tool.vue中的警告?vue&type=script&lang=js(./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/pages/Tool.vue?vue&type=script&lang=js)4:11-22 export 'Paginatable'(import as 'Paginatable')was not found in 'laravel-nova'(possible exports:CopiesToClipboard、DependentFormField、Errors、FieldValue、FormEvents、FormField、HandlesFieldAttachments、HandlesFormRequest、HandlesPanelVisibility、HandlesUploads、HandlesValidationErrors、HasCards、本地化、MetricBehavior、PreventFormAbandonment、PreventModalAbandonment、mapProps、useCopyValueToClipboard、useLocalization)
你知道怎么让它正常工作吗?
1条答案
按热度按时间ma8fv8wu1#
Paginatable不再是packages.js公共API的一部分,所以我不得不使用laravel-vue-pagination来滚动我自己的分页。我使用了RenderlessPagination并将其样式化,使其看起来与Nova 4中的默认分页完全相同。