vue.js - 在 NuxtJs 中显示更多或更少显示动态列表
问题描述
我有一个品牌列表，其中每个品牌都包含子品牌。我遍历了品牌并展示了各自的子品牌。我想使用按钮为每个品牌显示更少的项目。我已按照本文如何在 Vue JS 中显示更多/更少过滤器中的说明进行操作，并成功切换显示更多或更少项目，但问题是所有 div 都被切换。单击“显示更多”链接后，所有部分都会显示“显示更少”按钮。
请帮我弄清楚这里缺少什么。
这是代码：
<div
class="tw-bg-white tw-rounded tw-shadow-sm tw-mb-3 tw-pt-4 tw-pl-3 tw-pb-2"
v-for="(brand, index) in homeData.brands"
:key="index">
<div class="flex flex-col">
<h5 class="tw-font-medium tw-pb-2 tw-text-red-900">
{{ index | capitalize }}
</h5>
<a
:href="`/brands/${item.url}`"
class="clearfix d-inline-block text-nowrap text-dark tw-p-1 tw-mb-2 tw-no-underline"
v-for="(item, key) in brand"
:key="key">
<span v-if="key < limit_by" class="hover:tw-bg-red-900 hover:tw-text-white tw-py-2 tw-px-3 tw-border tw-border-gray-400 tw-rounded-md tw-shadow-sm tw-text-sm tw-leading-4 tw-font-medium tw-text-gray-700">
{{item.brand | capitalize}}
</span>
</a>
</div>
<a href="javascript:void(0)" class="tw-mt-1 tw-text-gray-900 hover:tw-text-red-900 tw-text-left tw-px-4 tw-py-1 tw-rounded-full tw-ring-1 tw-ring-red-900 tw-no-underline"
@click="simple_toggle(default_limit, brand.length)">{{ limit_by===13?'Show More': 'Show Less'}}</a>
</div>
...和
export default {
data() {
return {
default_limit: 13,
limit_by: 13,
};
},
async asyncData({ $http }) {
try {
const homeData = await $http
.$get("homepage-data")
.then((response) => response.result);
return { homeData };
} catch (err) {
return { homeData: [] };
}
},
methods: {
simple_toggle(default_limit, brand_length) {
this.limit_by =
this.limit_by === default_limit ? brand_length : default_limit;
},
},
};
下面是我的 JSON 数据的样子，它来自 API，我的数据库是 MongoDB：
"brands": {
"champagne": [
{
"_id": "5ffc09141e731869fb27d784",
"brand": "Belaire",
"title": "Belaire champagne brands | Belaire price in Kenya",
"headerOne": "Belaire Brands In Kenya & Their Prices",
"url": "belaire-champagne-brands",
"category": "champagne",
"pagedesc": "<p>Belaire Online Champagne Store In Kenya</p>",
"description": "<p>Buy Belaire champagne brands online at the best Belaire prices in Kenya. Explore our wide collection of sparkling wines plus free champagne delivery in Nairobi</p>",
"country": "France",
"updated_at": "2021-01-26T14:07:53.899000Z",
"created_at": "2021-01-11T08:15:16.804000Z"
},
{
"_id": "5ffc09141e731869fb27d78c",
"brand": "Moet Chandon",
"title": "Moet & Chandon Champagne brands | Moet prices in Kenya",
"headerOne": "Moet & Chandon Champagne Brands & Prices in Kenya",
"url": "moet-chandon-champagne-brands",
"category": "champagne",
"pagedesc": "<p>Moet & Chandon Online Champagne Store in Kenya</p>",
"description": "<p>Buy Moet & Chandon champagne brands online at best Moet prices in Kenya. Explore our wide collection of sparkling wines in Kenya. Champagne delivery in Nairobi</p>",
"country": "France",
"updated_at": "2021-08-21T11:22:44.118000Z",
"created_at": "2021-01-11T08:15:16.808000Z"
},
{
"_id": "5ffc09141e731869fb27d78d",
"brand": "Veuve Clicquot",
"title": "Veuve Clicquot champagne brands | Veuve Clicquot price in Kenya",
"headerOne": "Veuve Clicquot Champagne Brands in Kenya & Their Prices",
"url": "veuve-clicquot-champagne-brands",
"category": "champagne",
"pagedesc": "<p>Veuve Clicquot Online Champagne Store in Kenya</p>",
"description": "<p>Buy Veuve Clicquot champagne brands online at the best champagne prices in Kenya. Explore our collection of sparkling wines plus free champagne delivery in Nairobi</p>",
"country": "France",
"updated_at": "2021-01-15T16:42:42.233000Z",
"created_at": "2021-01-11T08:15:16.808000Z"
},
{
"_id": "5ffc09141e731869fb27d82d",
"brand": "Perrier Jouet",
"title": "Perrier Jouet champagne brands | Perrier Jouet prices in Kenya",
"headerOne": "Perrier Jouet Champagne Brands & Prices In Kenya",
"url": "perrier-jouet-champagne-brands",
"category": "champagne",
"pagedesc": "<p>Perrier Jouet Online Champagne Store In Kenya</p>",
"description": "<p>Buy Perrier Jouet champagne brands online at the best champagne prices in Kenya. Explore our collection of sparkling wines plus free champagne delivery in Nairobi</p>",
"country": "France",
"updated_at": "2021-01-18T07:05:13.733000Z",
"created_at": "2021-01-11T08:15:16.882000Z"
},
],
"cognac": [
{
"_id": "5ffc09141e731869fb27d785",
"brand": "hennessy",
"title": "Hennessy Cognac Brands | Hennessy price in Kenya",
"headerOne": "Hennessy Cognac Brands In Kenya and Their Prices",
"url": "hennessy-cognac-brands",
"category": "cognac",
"pagedesc": "Buy Hennessy Cognac brands online from Nairobi Drinks at the best Hennessy price in Kenya. Explore all types of brandy in Kenya for free cognac delivery in Nairobi",
"description": "<p>Buy Hennessy Cognac brands online from Nairobi Drinks at the best Hennessy price in Kenya. Explore all types of brandy in Kenya for free cognac delivery in Nairobi</p>",
"country": "France",
"updated_at": "2021-06-24T12:06:50.321000Z",
"created_at": "2021-01-11T08:15:16.805000Z"
},
{
"_id": "5ffc09141e731869fb27d786",
"brand": "Martell",
"title": "Martell Cognac Brands | Martell price in Kenya",
"headerOne": "Martell Cognac Brands In Kenya & Their Prices",
"url": "martell-cognac-brands",
"category": "cognac",
"pagedesc": "<p>Martell Cognac Online Store In Kenya</p>",
"description": "<p>Buy Martell Cognac brands online from Nairobi Drinks at the best Martell price in Kenya. Explore all types of brandy in Kenya for free cognac delivery in Nairobi</p>",
"country": "France",
"updated_at": "2021-01-15T16:35:00.248000Z",
"created_at": "2021-01-11T08:15:16.805000Z"
},
{
"_id": "5ffc09141e731869fb27d788",
"brand": "camus",
"title": "Camus Price in Kenya | Buy Camus online in Nairobi - Cognac Delivery Nairobi",
"headerOne": "Camus Cognac Brands In Kenya and Their Prices",
"url": "camus-cognac-brands",
"category": "cognac",
"pagedesc": "<p>Camus Cognac Online Store In Kenya</p>",
"description": "<p>Buy Camus Martins brands online from Nairobi Drinks at the best Camus price in Kenya. Explore all types of brandy in Kenya for free cognac delivery in Nairobi</p>",
"country": "France",
"updated_at": "2021-01-15T16:37:36.081000Z",
"created_at": "2021-01-11T08:15:16.806000Z"
},
],
"vodka": [
{
"_id": "60cc6efd2377090f1c2d2fb2",
"brand": "Royal Dragon",
"title": "Royal Dragon vodka | Buy alcohol online",
"category": "vodka",
"headerOne": "Royal Dragon brands & prices in Kenya",
"country": "Russia",
"pagedesc": "Royal Dragon Russian vodka is available for delivery in Kenyan at Nairobi Drinks. Buy vodka online in Kenya and enjoy free 24?7 20 minutes delivery in Nairobi",
"description": "<p>Royal Dragon Russian vodka is available for delivery in Kenyan at Nairobi Drinks. Buy vodka online in Kenya and enjoy free 24?7 20 minutes delivery in Nairobi </p>",
"url": "royal-dragon",
"updated_at": "2021-06-18T10:01:33.525000Z",
"created_at": "2021-06-18T10:01:33.525000Z"
},
{
"_id": "60cc730c5b23f20b6662c294",
"brand": "Medoff",
"title": "Medoff Vodka - Buy Russian vodka online | Alcohol delivery",
"category": "vodka",
"headerOne": "Medoff vodka brands & prices in Kenya",
"country": "Russia",
"pagedesc": "Medoff Russian vodka is available for delivery in Kenyan at Nairobi Drinks. Buy vodka online in Kenya and enjoy free 0714798820 minutes drinks delivery in Nairobi",
"description": "<p>Medoff Russian vodka is available for delivery in Kenyan at Nairobi Drinks. Buy vodka online in Kenya and enjoy free 0714798820 minutes drinks delivery in Nairobi </p>",
"url": "medoff",
"updated_at": "2021-06-18T10:18:52.952000Z",
"created_at": "2021-06-18T10:18:52.952000Z"
},
{
"_id": "60cc79e25b23f20b6662c295",
"brand": "Old Cock",
"title": "Old Cock vodka | Buy drinks online - Drinks delivery",
"category": "vodka",
"headerOne": "Old Cock vodka brands & prices",
"country": "United Kingdom",
"pagedesc": "Old Cock vodka is available for delivery in Kenyan at Nairobi Drinks. Buy vodka online in Kenya and enjoy free 0714798820 minutes drinks delivery in Nairobi",
"description": "<p>Old Cock vodka is available for delivery in Kenyan at Nairobi Drinks. Buy vodka online in Kenya and enjoy free 0714798820 minutes drinks delivery in Nairobi </p>",
"url": "old-cock",
"updated_at": "2021-06-18T10:48:02.198000Z",
"created_at": "2021-06-18T10:48:02.198000Z"
}
],
},
这是它的样子：
解决方案
所有限制都被切换，因为它们都绑定到组件上的相同属性：limit_by. 解决此问题的方法是在brands您从服务器接收到对象格式后重新构建它，以便每个类别都有一些您可以使用的显示信息。
尝试像这样格式化 JSON：
"brands": {
"champagne": {
"limit_by": 13, // Replace 13 with the length of sub-brands array (this will change when you toggle the limit)
"subbrands": [...]
},
...
}
像这样的 HTML：
<a
:href="`/brands/${item.url}`"
class="clearfix d-inline-block text-nowrap text-dark tw-p-1 tw-mb-2 tw-no-underline"
v-for="(item, key) in brand"
:key="key">
<span v-if="key < brand.limit_by" class="hover:tw-bg-red-900 hover:tw-text-white tw-py-2 tw-px-3 tw-border tw-border-gray-400 tw-rounded-md tw-shadow-sm tw-text-sm tw-leading-4 tw-font-medium tw-text-gray-700">
{{item.brand | capitalize}}
</span>
</a>
和这样的simple_toggle功能：
simple_toggle(brand, showAll) { // Where brand is a brand category from the API and showAll is a flag that determines whether to show all sub-brands or limit them
brand.limit_by = showAll ? brand.subbrands.length : this.default_limit;
}
推荐阅读
- swift - 在 navigationBarItems 中使用 LottieView
- javascript - 自定义 Vue 指令中的元素 DOM 修改
- next.js - 如何调试 Next.js 开发服务器挂起并阻止任何进一步的请求？有没有办法获取更多数据？
- firebase - 是否可以在客户端使用 Firebase 身份验证来验证对 Google Cloud SQL 的访问？
- oracle - 将 S3 存储桶中的对象加载到 EC2 上的 Oracle
- python - 如何使用 Python 打开 chromebook 应用程序？
- javascript - 将任务添加到待办事项列表
- python - 使用带有查找元素的硒上传文件
- php - 与链接连接时出现连接无法正常工作的问题
- java - 如何在 Android WebView 中将特定网站列入白名单