vue show more / show less functionality

hi, i have a list of shipment-with-zones collection passed into vue component, the collection has long list of zones sorted by countries so i need to implement show more / show less functionality for multiple collections on shipping zones.

this is what i have currently,

// this is the shipping zone list, i'm using slice to show only 5 zones as soon as the component renders on the page
<p v-for="(zone, index) in shipment.zone.slice(0, limitResults)" :key="index" v-text="zone.state_name"></p>

// this is the show less/more button
<a @click="showAllRegions(shipment.zone.length)" v-text="expandName"></a>

<script>
export default {
props: ['shipment'],
    data() {

        return {
            limitResults : 5,
            expandName : '... Show regions'
        };
    },
methods: {
	showAllRegions (count){
            if (this.limitResults == count) {
                this.limitResults = 5;
                this.expandName = '... Show Regions';
            }else{
                this.limitResults = count;
                this.expandName = '... Hide Regions';
            }

        }
	}
};
</script>

the code is working only if i have 1 zone in the shipping collection and it wont work for multiple zones.

Is there is a way on how to make it work on, Any ideas ???

vdvcoder

3 years ago

Level 13

<template>
  <div>
    <div v-for="shipment in shipments" :key="shipment.id">
      <h2>Shipping zones for {{ shipment.name }}</h2>
      <p v-for="(zone, index) in shipment.zone.slice(0, limitResults)" :key="index" v-text="zone.state_name"></p>
      <a @click="showAllRegions(shipment.zone.length)" v-text="expandName"></a>
    </div>
  </div>
</template>

That should solve it.

1 like

nhayder

3 years ago

Level 13

@vdvcoder i'm getting same results with your code, when i clicked the show more button i can see all the zone name change to show less and only the last zone is getting expanded no matter what zone name you click.

Please or to participate in this conversation.