Vue3-carousal 插件未显示 Vue 组件 Laravel 中的数据？

Question

我有一个 Laravel 10(php 8.1) 项目，其中安装了 vue 3 用于制作动态组件。

组件详细信息： 我创建了一个组件，用于向公司的团队成员显示一个类别栏，可以对他们进行分类（在实现 vue3-carousel 之前，所有功能都运行良好）。

努力实现： 我遇到的问题是我尝试为成员实现动态分页。

我尝试实现多个 vue 插件（vue-awesome-paginate、vue3-pagination、v-pagination-3），但它们都不起作用。现在我尝试实现 vue3-carousel 它正在工作，但问题是数据没有显示在其中。。

项目依赖： 拉拉维尔 10.10 维尤^3.2.36 vue3-轮播^0.3.1

下面是我的全部代码

TeamMember.vue：

<template>
    <div>
        <!-- Category Section -->
        <div class="isotop_nav" id="categories-container">
            <ul>
                <li>
                    <!-- Use Vue data properties and methods -->
                    <a href="#" :class="{ 'active': selectedCategory === null }"
                        @click.prevent="handleCategoryClick(null)">
                        All
                    </a>
                </li>
                <!-- Loop through categories and generate links -->
                <li v-for="category in categories" :key="category.id">
                    <!-- Use Vue data properties and methods -->
                    <a href="#" :class="{ 'active': selectedCategory === category.name }"
                        @click.prevent="handleCategoryClick(category.name)">
                        {{ category . name }}
                    </a>
                </li>
            </ul>
        </div>

        <!-- Team Section -->
        <div class="leadership_list onTeam_sec">
            <carousel :items-to-show="3">
                <div class="row justify-content-center" id="filtered-team-members">
                    <!-- Use Vue data properties and methods -->
                    <slide v-for="member in members" :key="member.id" class="col-xxl-3 col-xl-3 col-lg-4 col-md-4 category-item">
                        <div :data-category="member.category ? member.category.name : ''">
                            <div class="leadership_list_info">
                                <span>
                                    <!-- Use Vue data properties -->
                                    <img :src="`/uploads/${member.profile_picture}`" alt="leadership profile" />
                                </span>
                                <a href="#"><strong>{{ member . name }}</strong></a>
                                <p>{{ member . role }}</p>
                                <div class="contactSocial_infoList">
                                    <ul>
                                        <!-- Use Vue data properties -->
                                        <li v-if="member.twitter_link">
                                            <a :href="member.twitter_link" target="_blank" class="s_tw">
                                                <i class="fa-brands fa-twitter"></i>
                                            </a>
                                        </li>
                                        <li v-if="member.salesforce_link">
                                            <a :href="member.salesforce_link" target="_blank" class="s_inst">
                                                <i class="fa-brands fa-salesforce"></i>
                                            </a>
                                        </li>
                                        <li v-if="member.linkedIn_link">
                                            <a :href="member.linkedIn_link" target="_blank" class="s_link">
                                                <i class="fa-brands fa-linkedin"></i>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </slide>
                </div>
                <!-- <Page :total="pageInfo" :current="pageInfo.current_page"  :page-size="parseInt(pageInfo.total)" v-if="pageInfo"/> -->
                <p v-if="members.length === 0">No team members found.</p>
                <template #addons>
                    <navigation />
                    <pagination />
                </template>
            </carousel>
        </div>
    </div>
</template>


<script>
    import axios from "axios";
    import 'vue3-carousel/dist/carousel.css'
    import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel'
    // import ViewUIPlus from 'view-ui-plus'
    // import 'view-ui-plus/dist/styles/viewuiplus.css'


    export default {
        data() {
            return {
                members: [],
                categories: [],
                selectedCategory: null,
                // currentPage: 1,
                // itemsPerPage: 3,  // Adjust as needed
                // totalItems: 0,
                // total: 3,
                // pageInfo: null,
            };
        },
        components: {
            // VueAwesomePagination,
            Carousel,
            Slide,
            Pagination,
            Navigation,
            // ViewUIPlus
        },
        mounted() {
            // Fetch initial team members (all members)
            //
            this.fetchCategories();
            // this.filterTeamMembers();
        },
        methods: {

            // function to fetch categories
            fetchCategories() {
                // axios.get(`/our-team/categories`)
                axios.get(`/our-team/categories`)
                    .then(response => {
                        console.log('API Response for categories:', response.data);
                        this.categories = response.data.categories;
                        // this.members = response.data.members;
                        this.members = Object.entries(response.data.members).map(([key, value]) => value);
                        console.log(this.members);
                        // this.pageInfo = response.data.members;
                        // console.log(this.pageInfo);
                        this.selectedCategory = null;
                    })
                    .catch(error => {
                        console.error('Error fetching categories:', error);
                    });
            },

            // Function to fetch and display filtered team members
            filterTeamMembers(member) {
                axios.get(`/our-team/${member || 'all'}`)
                    .then(response => {
                        console.log('API Response:', response.data);
                        // this.members = response.data.members;
                        this.members = Object.values(response.data.members);
                        this.totalItems = response.data.total;
                    })
                    .catch(error => {
                        console.error('Error fetching team members:', error);
                    });
            },

            handleCategoryClick(category) {
                // Set the selected category
                this.selectedCategory = category;
                this.currentPage = 1;
                // Filter team members based on the selected category
                this.filterTeamMembers(category);
            },

                // handlePaginationChange(newPage) {
                // this.currentPage = newPage;
                // this.filterTeamMembers(this.selectedCategory);
                // },


        // handlePaginationChange(newPage) {
        //     this.currentPage = newPage;
        //     this.filterTeamMembers(this.selectedCategory);
        //     console.log(this.filterTeamMembers(this.selectedCategory));
        // },

        // nextPage() {
        //     if (this.currentPage * this.itemsPerPage < this.totalItems) {
        //         this.currentPage++;
        //         this.filterTeamMembers(this.selectedCategory);
        //     }
        // },

        // prevPage() {
        //     if (this.currentPage > 1) {
        //         this.currentPage--;
        //         this.filterTeamMembers(this.selectedCategory);
        //     }
        // },

        },

    }
</script>

路线：

Route::get('/our-team/categories', [TeamMemberContentController::class, 'getTeam'])->name('team');
Route::get('/our-team/{member?}', [TeamMemberContentController::class, 'filterByCategory'])->name('team-members.filter');

TeamMemberContentController.php

<?php

namespace App\Http\Controllers;

use Log;
use App\Models\Category;
use App\Models\TeamMember;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\Models\TeamCategory;
use Illuminate\Support\Facades\View;

class TeamMemberContentController extends Controller
{
    public function index(Request $request, $category = null)
    {
        // $members = TeamMember::all();
        $members = TeamMember::where('status', 'opened')->orderBy('order_column')->get();
        $categories = TeamCategory::all();
        $selectedCategory = null;

        // $categories = TeamCategory::all();
        // $selectedCategory = null;

        if ($category && $category !== 'all') {
            $selectedCategory = TeamCategory::where('name', 'like', $category)->first();
            if ($selectedCategory) {
                $members = $selectedCategory->teamMembers()->where('status', 'opened')->orderBy('order_column')->get();
            } else {
                $members = TeamMember::where('status', 'opened')->orderBy('order_column')->get();
            }
        }


        if ($request->ajax()) {
            try {
                $view = View::make('components.team-members', compact('members', 'categories', 'selectedCategory'))->render();
                return response()->json(['html' => $view]);
            } catch (\Exception $e) {
                return response()->json(['error' => $e->getMessage()], 500);
            }
        }

        return view('our-team.our-team', compact(
            'members',
            'categories',
            'selectedCategory'
        ));
    }


    public function filterByCategory(Request $request, $category)
    {
        // Log::info('Received category:', ['category' => $category]);
        if ($category === 'all') {
            // If the category is 'all', return all team members
            $members = TeamMember::where('status', 'opened')->orderBy('order_column')->paginate(3);
        } else {
            // If it's a specific category, filter by that category
            $categoryModel = TeamCategory::where('name', 'like', $category)->first();

            if (!$categoryModel) {
                // Handle the case when the category is not found
                return response()->json([
                    'members' => []
                ]);
            }

            // $members = $categoryModel->teamMembers;
            $members = $categoryModel->teamMembers()->where('status', 'opened')->orderBy('order_column')->get();
        }

        if ($request->ajax()) {
            return response()->json([
                'members' => $members,
                // 'categories' => $categories,
                // 'selectedCategory' => $selectedCategory,
            ]);
        }

        return view('our-team.our-team', compact('members', 'categories'));
    }


    public function getTeam(Request $request, $category = null)
    {
        $membersQuery = TeamMember::where('status', 'opened')->orderBy('order_column');
        $categories = TeamCategory::all();
        $selectedCategory = null;

        if ($category && $category !== 'all') {
            $selectedCategory = TeamCategory::where('name', 'like', $category)->first();
            if ($selectedCategory) {
                $membersQuery->where('team_category_id', $selectedCategory->id);
            }
        }

        $members = $membersQuery->get();

        if ($request->ajax()) {
            return response()->json(['members' => $members, 'categories' => $categories, 'selectedCategory' => $selectedCategory]);
        }

        return view('our-team.our-team', compact('members', 'categories', 'selectedCategory'));
    }
}

vite.congfig.js

import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
    plugins: [
        laravel({
            input: [
                "resources/sass/app.scss",
                "resources/js/app.js",
                "resources/css/app.css",
            ],
            // input: ["resources/js/app.js"],
            refresh: true,
        }),
        vue({
            compilerOptions: {
                isCustomElement: (tag) => tag.startsWith("carousel"),
            },
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    resolve: {
        alias: {
            vue: "vue/dist/vue.esm-bundler.js",
        },
    },
});

下面是响应数据格式图像：

请告诉我如何解决该问题，或者有其他方法（插件）来实现动态分页。

尝试：我尝试实现组件的动态分页，但没有成功。

期望：我想为成员实现动态分页，当我尝试通过类别栏进行过滤时，这将起作用。

Answer 1

你可以尝试惯性，它使得使用 vue 变得更加容易 惯性vue分页