vue.js 如何在laravel中使用nova4自定义工具进行分页

3pmvbmvn  于 2023-05-23  发布在  Vue.js
关注(0)|答案(1)|浏览(179)

这是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 '&nbsp;'
                } 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)
你知道怎么让它正常工作吗?

ma8fv8wu

ma8fv8wu1#

Paginatable不再是packages.js公共API的一部分,所以我不得不使用laravel-vue-pagination来滚动我自己的分页。我使用了RenderlessPagination并将其样式化,使其看起来与Nova 4中的默认分页完全相同。

相关问题