代码之家 › 专栏 › 技术社区 › Ali Hassan

在vue3组件插件中加载数据时出错?

vuejs3 axios vue.js laravel php

0

Ali Hassan · 技术社区 · 1 年前

我在Laravel 10中有一个vue 3组件,我正在应用它 vue3-carousel .

组件信息: 我正在创建一个动态的团队成员狂欢节,在那里我可以用团队类别的动态栏展示公司的团队。一切都很好。

问题: 在我的类别栏中,所有动态类别都来自数据库,除了 全部的 我手动创建的目录(不是添加到数据库中)。

我所有的动态类别都运行良好。当我点击它们时,它会用各自的数据填充转盘。这个问题与 全部的 类别我收到以下错误和警告。

错误:

TeamMembers.vue:30 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'id')
at TeamMembers.vue:30:69
at renderList (chunk-AR356GSD.js?v=ae36e8ac:3417:18)
at TeamMembers.vue:60:29
at renderFnWithContext (chunk-AR356GSD.js?v=ae36e8ac:2039:17)
at Proxy.<anonymous> (vue3-carousel.js?v=ae36e8ac:561:102)
at renderComponentRoot (chunk-AR356GSD.js?v=ae36e8ac:2068:39)
at ReactiveEffect.componentUpdateFn [as fn] (chunk-AR356GSD.js?v=ae36e8ac:5342:26)
at ReactiveEffect.run (chunk-AR356GSD.js?v=ae36e8ac:1248:23)
at instance.update (chunk-AR356GSD.js?v=ae36e8ac:5389:52)
at updateComponent (chunk-AR356GSD.js?v=ae36e8ac:5236:18)

它的api响应数据也不正确,当我点击时,它只是给出了第二类(领导力)的数据 All

API Response: 
 {members: {â¦}}
   members: 
    current_page:1
    data:Array(3)
      0:{id: 2, name: 'Maham Hassan', role: 'CTO Founder', profile_picture: 'images/leaderShip_pic1.png', twitter_link: 'https://www.salesforce.com/in/?ir=1', â¦}
      1:{id: 11, name: 'alan', role: 'Dev', profile_picture: 'images/team5.png', twitter_link: null, â¦}
      2:{id: 1, name: 'Maham Hassan', role: 'CTO Founder', profile_picture: 'images/leaderShip_pic1.png', twitter_link: null, â¦}
     length:3
     [[Prototype]]:Array(0)
     first_page_url:"http://127.0.0.1:8000/our-team/All?page=1"
     from:1
     last_page:4
     last_page_url:"http://127.0.0.1:8000/our-team/All?page=4"
     links:(6) [{â¦}, {â¦}, {â¦}, {â¦}, {â¦}, {â¦}]
     next_page_url:"http://127.0.0.1:8000/our-team/All?page=2"
     path:"http://127.0.0.1:8000/our-team/All"
     per_page:3
     prev_page_url:null
     to:3
     total:11
     [[Prototype]]:Object
     [[Prototype]]:Object

警告图像:

我只想当我点击 全部的 它应该像其他动态类别一样,在carousel中加载所有数据或结果。但它并没有获取数据并显示出来。

组件代码: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">
            <div  id="filtered-team-members">
            <carousel :items-to-show="3" :items="members"  class="row justify-content-center">
                    <!-- Use Vue data properties and methods -->
                    <!-- console members data -->


                    <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>
                                    <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>
                    <!-- <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>
    </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: [],
                //     members: [
                //     { id: 1, name: 'John Doe', role: 'Developer', twitter_link: 'https://twitter.com/johndoe' },
                //     { id: 2, name: 'Jane Doe', role: 'Designer', linkedIn_link: 'https://linkedin.com/janedoe' },
                // ],
                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?page=${page}&total=${this.total}`)
                // 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 ) {
                 const endpoint = member ? `/our-team/${member}` : '/our-team/all';
                axios.get(endpoint)
                    .then(response => {
                        console.log('API Response:', response.data);
                        // this.members = response.data.members;
                        this.members = 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);
            },
        },

    }
</script>

路线

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

控制器代码:TeamMemberController.php

    public function filterByCategory(Request $request, $category)
    {
        // Log::info('Received category:', ['category' => $category]);
        if ($category === 'all' || $category === null) {
            // 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'));
    }

告诉我如何解决此问题以及如何处理的数据获取 全部的 类别

尝试过:我尝试过获取上的所有数据 全部的 类别时,我选择了它,但它给出了错误。

Expect:就像其他动态类别一样,我想要的是,当我点击它时,它应该会获取所有数据。

1 回复 | 直到 1 年前

1

Mahdi 1 年前

您正在使用 ->get() 当某个类别单击时,以及 ->paginate(3) 当得到所有的时候。

这会导致get-all所在的位置出现分页,因此使用 this.members = response.data.members.data; 当得到所有这些和 this.members = response.data.members; 当类别在vue中点击时,

或更改 ->繁殖(3) 到 ->get() 在Controller中获取所有这些,比如获取类别成员,或者您喜欢的内容。