Home » vue » Show more or show less for dynamic list in NuxtJs

Show more or show less for dynamic list in NuxtJs

Posted by: admin November 26, 2021 Leave a comment

Questions:

I have a list of brands where each brand contains sub-brands. I have looped through the brands and showed respective sub-brands. I want to show fewer items for each brand using a button. I have followed the instructions in this article How to show more/less filters in Vue JS and succeeded in toggling in showing more or less items but the problem all divs are being toggled. The "show less" button shows on all sections after clicking the "show more" link.

Kindly help me figure out what am missing here.

This is the code:

<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> 

…and

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;
        },
    },
};

Below is how my JSON data looks like, it’s from an API, and my DB is 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 &amp; Chandon Online Champagne Store in Kenya</p>",
"description": "<p>Buy Moet &amp; 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&nbsp;</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&nbsp;</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&nbsp;</p>",
"url": "old-cock",
"updated_at": "2021-06-18T10:48:02.198000Z",
"created_at": "2021-06-18T10:48:02.198000Z"
}
],
},

This is how it looks like:

enter image description here

Answers:

All limits are being toggled because they are all bound to the same property on the component: limit_by. A work-around for this would be to restructure the brands object format once you’ve received it from the server so that each category has some display information which you can use.

Try formatting the JSON like this:

"brands": {
"champagne": {
"limit_by": 13,  // Replace 13 with the length of sub-brands array (this will change when you toggle the limit)
"subbrands": [...]
},
...
}

The HTML like this:

<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>

And the simple_toggle function like this:

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;
}