Show less and more text in Vue JS
By There are many ways to make functionality for less and more text in Vue JS. We can create custom functions as per our requirement or we can use the Vue JS package to do that.
If you want to do this by Vue JS package then you can visit less and more text in Vue JS by package.
or if you want to do that by your custom function then follow this tutorial:
data: () => ({
readMore: {},
}),<p v-if="!readMore[script.id]">{{script.script_content.substring(0, 200) + ".."}}</p>
<p v-if="readMore[script.id]">{{script.script_content}}</p>
<span @click="showMore(script.id)" v-if="!readMore[script.id]" class="btn btn-primary">Show more</span>
<span @click="showLess(script.id)" v-if="readMore[script.id]" class="btn btn-primary">Show less</span>methods: {
showMore(id) {
this.$set(this.readMore, id, true);
},
showLess(id) {
this.$set(this.readMore, id, false);
},
}I hope, this small tutorial will help you to accomplish this basic functionality for show less and more text in Vue JS.