我在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');型
控制器编码：TeamController.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'));
}型
请告诉我如何解决此问题以及如何处理All类别的数据提取。
尝试：我试图获取所有的数据在所有类别当我选择它，但它给出错误。
期望：就像其他动态类别一样，我想要的是，当我点击它时，它应该获取所有数据。
1条答案
按热度按时间1aaf6o9v1#
当点击一个类别时使用
->get()，当获取所有类别时使用->paginate(3)。这会导致在where getting all中分页，所以在获取所有类别时使用
this.members = response.data.members.data;，在vue中单击类别时使用this.members = response.data.members;，或者将
->paginate(3)更改为->get()，在Controller中获取所有它们，比如获取类别成员，或者您更喜欢的。