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
<template>to handle visual things, keeping the right separation of concerns, using the new individualclub.truncateproperty with av-if/v-elseblock:<h4 class="card-title" @mouseenter="club.truncate = false" @mouseleave="club.truncate = true"> <template v-if="club.truncate">{{trucateText(club.description)}}</template> <template v-else>{{club.description}}</template> </h4>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.
讨论(0) -
Try using key attribute for each item. If you set a mouseover for showAll, it will certainly display all the descriptions as it will return true for all. That's why, you should do dynamic list rendering here that Vue supports, similarly like this:
<div v-for="club in row" :key="club.id">Also, I recommend you to have a look at the official documentation about dynamic list rendering :
https://vuejs.org/v2/guide/list.html
讨论(0) -
You can create an array of boolean where each value corresponds to a team.
let formattedClubs= [{name: "team1", description: "desc team1"}, {name: "team2", description: "desc team2"}]; let showDescription = Array.from(formattedClubs, show => false);You have the initial team array. You can create an array of the same size with values initialised to false.
In your template
<b-card-group deck deck v-for="(row, index) in formattedClubs">Now you can match a team in the array
formattedClubs[index]with a value inshowDescription[index]@mouseover="showDescription[index] = true" @mouseout="showDescription[index] = false"Same in your events.
讨论(0)
加载中...
- 热议问题