Here is my script for a vue component :
<template>
...
<b-card-group deck v-for="row in formattedClubs">
<b-card v-for="club in row"
img-src="http://placehold.it/130?text=No-image"
img-alt="Img"
img-top>
<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>
<p class="card-text">
{{club.price}}
</p>
<p class="card-text">
{{club.country}}
</p>
<div slot="footer">
<b-btn variant="primary" block>Add</b-btn>
</div>
</b-card>
</b-card-group>
...
</template>
<script>
export default {
data: function () {
return {
clubs: [
{id:1, description:'chelsea is the best club in the world and chelsea has a great player', price:1000, country:'england'},
{id:2, description:'liverpool has salah', price:900, country:'england'},
{id:3, description:'mu fans', price:800, country:'england'},
{id:4, description:'city has a great coach. Thas is guardiola', price:700, country:'england'},
{id:5, description:'arsenal player', price:600, country:'england'},
{id:6, description:'tottenham in london', price:500, country:'england'},
{id:7, description:'juventus stadium', price:400, country:'italy'},
{id:8, description:'madrid sell ronaldo', price:300, country:'spain'},
{id:9, description:'barcelona in the spain', price:200, country:'spain'},
{id:10, description:'psg buys neymar at a fantastic price', price:100, country:'france'}
]
}
},
computed: {
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);
return c;
}, []);
}
},
methods: {
trucateText (value) {
const length = 30;
return value.length <= length ? value : value.substring(0, length) + "...";
}
}
}
</script>
When this script runs, the view will look like this:
https://i.sstatic.net/yB1lu.png
On hovering over the description, the result would be like:
https://i.sstatic.net/EvRkU.png
This causes a change in the height of the list box.
How can I address this issue?
The desired view should be similar to this: