Currently, I have implemented a computed property to dynamically generate an interpolated string for rendering. Below is an example snippet from my code:
<div class="productDetailContainer">
<nuxt-link :to="{ path: '/product/sidebar/' + product.shortName }">
<h4 class="productName">{{ product.name }}</h4>
</nuxt-link>
<h4 class="productPrice">
{{ priceRange }} <------------------ THIS LINE
</h4>
</div>
priceRange() {
const { product } = this;
if (product.price.lowest !== product.price.highest) {
return `RM${product.price.lowest.toFixed(
2
)}~RM${product.price.highest.toFixed(2)}`;
}
return `RM${product.price.highest.toFixed(2)}`
},
https://i.sstatic.net/8C1jx.png
However, changing the {{priceRange}} to lorem ipsum causes the h4 element to break to the next line automatically if the text overflows, as illustrated in the image below: