DEV Community

Discussion on: Read More/Read Less functionality with Vue

Collapse
aarone4 profile image
Aaron Reese

But the text us still in the DOM. If you need to remove it, use a computed function to return a short string or array of short strings and then conditionally return the short or long version using v-if directive or the ternary operator.

Collapse
laurrvt profile image
Laur.Rvt Author

Thanks for sharing that.
The point was to make it really simple and in a better way (in my opinion) that I have found on forums. For example, in this post dev.to/ebenoladutemu/simple-read-m... author shows how to do that for static texts which is not really working for me.
Is that really a problem that text is still in the DOM? I mean it looks good just hiding it, but maybe I don't know something. Tell me please about that :)

Collapse
aarone4 profile image
Aaron Reese

Depends on your use case. If text was behind a paywall or was the answer to a quiz or should be suppressed for screen readers then yes, having it in the DOM would be an issue but most of the time probably not.
But that is why you also have v-if and v-show. The latter adds or removes visibility: hidden, the former actually adds or removes the DOM element

Thread Thread
laurrvt profile image
Laur.Rvt Author

Never thought about that but thanks. I will consider your advice :)