Ellipsis filter vueJs

Question

I'm rendering dynamically a text content into a dom element with Vue.JS

<article>{{ movie.summary }}</article>

what I'm trying to achieve is creating an auto-ellipsis filter so I would basically write this :

<article>{{ movie.summary | ellipsis({maxLines: 6}) }}</article>

for example.

The problem with that is that I need informations about the article DOM element to calculate line-height, height, width etc...

I can't figure out how to retrieve these in a clean way and I don't want to use a dependency / plugin to achieve that.

Is there a way to get dom information about filtered content element ? Should I use another approach ?

Thank you for your time.

Answer 1

You should use ref attribute to get the DOM element. and also use computed properties instead of filters , it's a better practice.