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 Author

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 Author

Yay! Awesome. Always welcome!

Collapse
mzahraei profile image
Ardalan

Aha useful example

Collapse
ebenoladutemu profile image
Ebenezer Oladutemu Author

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

DEV runs on 100% open source code known as Forem.

Β 
Contribute to the codebase or host your own.
Β 
Check these out! πŸ‘‡