Dynamic List Show More & Less Feature Using VueJS

Posted 6:23 am by muni & filed under JAVASCRIPT, VueJS.

This is continuation of my previous tutorial on Add Show More & Less feature using VueJS. Before continuing this tutorial, please have a look at my previous tutorial on this Show More & Less.

We display the array of objects using v-for directive, where content of the each item is large. So by default we will display excerpt of the content with show more button. When user clicks on the show more button, we will display large content with show less button. let see how we are going to implement this for this dynamic list.

<script src="https://unpkg.com/vue"></script>
<div id="app">
    <h1 class="title">{{title}}</h1>

    <div>
        <ul>
            <li :key="key" v-for="(list, key) in lists">
                <!-- Excerpt section -->
                <div class="mb-1 gray-bg" v-show="!list.Flag">
                    <p class="mb-1">{{list.about | summary }}</p>
                    <p class="btn" @click="toggler(list, true);">Show More</p>
                </div>
                <!-- Excerpt section end -->

                <!-- Content section -->
                <div class="mb-1 gray-bg" v-show="list.Flag">
                    <p class="mb-1" v-html="list.about"></p>
                    <p class="btn" @click="toggler(list, false);">Show Less</p>
                </div>
                <!-- Content section end-->
            </li>
        </ul>
    </div>
</div>
<script>
    var app = new Vue({
                data: function(){
                    return {
                        title: "Dynamic List Show More & Less Feature Using VueJS",
                        lists: [
                            {
                                "about": "Velit adipisicing quis mollit consequat ullamco veniam ipsum in laborum excepteur veniam nostrud qui amet. Quis ipsum nostrud reprehenderit consectetur consectetur consequat id. Ipsum nostrud magna aliquip nisi ea nisi Lorem ut cillum nisi eiusmod tempor. Aute incididunt commodo ea deserunt in quis esse eiusmod voluptate nisi veniam anim.\r\n<br/>Esse eiusmod veniam sunt reprehenderit magna in. Eu officia sunt laborum qui irure ex ad excepteur ea duis quis esse sint occaecat. Laborum ut et dolor labore. Exercitation Lorem culpa quis sint sint exercitation elit ea aute culpa ex. Dolore Lorem consequat dolore consequat reprehenderit voluptate officia pariatur qui dolor ut Lorem labore quis. Sint proident id consequat cupidatat nostrud. Dolore sit labore reprehenderit sit cupidatat voluptate laboris incididunt.\r\n<br/>Qui amet consectetur anim proident dolore nisi dolore. Veniam dolore fugiat deserunt proident officia dolor in tempor ut nulla dolore elit ea labore. Ut anim esse do reprehenderit adipisicing. Et in Lorem incididunt nostrud et. Cillum quis enim nisi ad cillum.\r\n<br/>"
                            },
                            {
                                "about": "Officia veniam Lorem labore eu sint do anim pariatur cupidatat officia fugiat aliqua sunt culpa. Nulla aute voluptate aliquip ea Lorem. Anim laboris dolor velit culpa eu deserunt qui sunt eu in aute. Ut voluptate anim labore in eiusmod aliquip do ea id magna et do et.\r\n<br/>Excepteur sunt eiusmod cillum laboris aliqua elit commodo. Ut anim duis laboris pariatur laborum esse ad aute culpa consequat est occaecat eiusmod qui. Aute sunt laboris officia consectetur nostrud mollit dolore incididunt id. Qui duis elit deserunt culpa ut labore id esse. Laboris veniam duis commodo dolor sit ex id ut occaecat. Aliquip exercitation culpa veniam voluptate occaecat adipisicing ullamco voluptate culpa et dolor fugiat ut aliqua. Sunt id commodo id ut dolore magna non dolor cupidatat anim laboris nulla.\r\n<br/>Nulla aliqua laboris velit eu ex ullamco irure labore id et aliqua. Eiusmod aliqua minim incididunt adipisicing do cillum velit quis non ut voluptate sint velit culpa. Qui cillum tempor excepteur Lorem tempor occaecat laborum magna magna pariatur labore amet est. Eu nulla enim Lorem ex est adipisicing elit velit cupidatat amet do reprehenderit aliquip. Cupidatat magna excepteur laboris officia exercitation anim Lorem tempor. Occaecat ex pariatur aliqua enim.\r\n<br/>"
                            }
                            ]
                    }
                },
                filters: {
                    summary: function(text) {
                        return text.substring(0, 150)+' ...';
                    }
                },
                methods:{
                    toggler(obj, flag){
                        this.$set(obj, 'Flag', flag);
                    }
                }
            });
    app.$mount("#app");        
</script>

I have added CDN link of Vue.js v2.6.11, next created VueJS app by instantiating Vue. Using v-for directive listed the array of Objects. Where each item will have two section. 

1. Section one – excerpt data with show more button
2. Section two – large data with show less button

At a time either one of the section is visible by dynamic Flag attribute on each item. I made this dynamic Flag attribute is a reactive one using $set method. So whenever user clicks on either show more/less button, the toggler method triggered that will either true/false value to display more/less content based on the Flag value. 

By default less content is displayed using v-show directive, where v-show directive checks

v-show="!list.Flag"

Initially Flag property on list object is undefined. Show !list.Flag becomes true, so less content automatically visible by default.

Please leave comment, If you guys have any doubts.