DEV Community

Ebenezer Oladutemu
Ebenezer Oladutemu

Posted on

Simple Read More, Read Less in Vuejs


A simple Read More, Read Less I created in Vuejs. This would take tens of lines of code in vanilla JS but just 6 lines of logic in Vue.
Just import the Vue CDN in your script tag.
Could I have done it better?
Let me know your thoughts!

Top comments (8)

Collapse
 
lilianetop profile image
LilianeTop

Can you help me to make it work. Somehow it is not working in my website. I can't figure out why not as you code is so elegant. I would really like to use it but I think a piece of the puzzle is missing. I just get one button that reads "read more read less". I just copied and pasted your code.... Thanks for a reply in advance!

Collapse
 
ebenoladutemu profile image
Ebenezer Oladutemu

Hi Liliane. Sorry for the late reply. Did you add the CDN link?

Collapse
 
lilianetop profile image
LilianeTop

Yes and I got it to work. Thanks again for uploading your example.

Thread Thread
 
ebenoladutemu profile image
Ebenezer Oladutemu

Yay! Awesome. Always welcome!

Collapse
 
mzahraei profile image
Ardalan

Aha useful example

Collapse
 
ebenoladutemu profile image
Ebenezer Oladutemu

Righttt! Thank you.

Collapse
 
laurrvt profile image
Laur.Rvt

Hi! It is a really good way to do that but its not really working for me because I have to use a variable to store the text. So I did a version which works without static text.dev.to/laur2003/read-more-read-les...
Waiting for a feedback :)

Collapse
 
munihappy profile image
muni

I had implemented show more & show less functionality for list - youtube.com/watch?v=W7wqGVzn1aA