Showing truncated text only on hover with Vue
I tried it like this:
...
-
The problem is that you have only one property to control the truncation of all items.
Firstly, you need to ensure that each club has its own boolean to control the text truncation. Lets use your already existing computed property to add a new reactive property for each club:
formattedClubs () { return this.clubs.reduce((c, n, i) => { if (i % 4 === 0) c.push([]); c[c.length - 1].push(n); this.$set(n, 'truncate', true); // Here we add the new reactive property. return c; }, []); }Secondly, let's use the
to handle visual things, keeping the right separation of concerns, using the new individualclub.truncateproperty with av-if/v-elseblock:{{trucateText(club.description)}} {{club.description}}
And now, the
trucateTextmethod only needs to care about returning the truncated text, since it's only called if we're truncating a description of one club:methods: { trucateText (value) { const length = 30; return value.length <= length ? value : value.substring(0, length) + "..."; } }Take a look at the fully working code here if any doubts persists.
加载中...
- 热议问题