Как во Vue.js установить одинаковую высоту элементам DOM дерева?

Question

[Maксим Волков]

Создаю на VUE.JS SPA сайт каталог товаров. На главной странице каталога получаю список категорий товаров. Но блоки с названиями категорий имеют различную высоту, выглядят ужасно.



На обычном сайте эту проблему решал простым JS скриптом, определял высотой самого высокого элемента и задавал всем элементам атрибут style =”height: полученое значение. Но как эту проблему решить на VUE.JS?

Сам компонент списка каталога имеет вложенный компонент элемента каталога.

<template>
    <h1 class="main_title">Каталог</h1>
    <div class="section-wrap">
        <catalog-item v-for="item in catalog" :key="item.id" :item="item"></catalog-item>
    </div>
</template>

<script>
import CatalogItem from './CatalogItem.vue'
export default {
    name: "Catalog",
    components: {
        CatalogItem
    },
    data: function(){
        return {
            catalog: [],
        }
    },
    methods:{
        getCatalog:function(){
            return fetch('api/catalog')
                .then((response) => response.json())
                .then((json) => this.catalog = json.catalog);
        },
    },
    mounted() {
        this.getCatalog()
        console.log(this.catalog)
    }
}
</script>

<template>
    <div class="section_item">
        <div class="section_elem" >
            <img :src="item.image" :alt="item.name">
            <h3 class="section_elem-title"><a href="/">{{item.name}}</a></h3>
        </div>
    </div>
</template>
<script>
export default {
    name: "CatalogItem",
    props: ['item'],
    methods:{
        //
    }
}
</script>

Прошу помощи. Какие есть варианты, подходы к решению задачи?

Comments

[Wispik]

На обычном сайте эту проблему решал простым JS скриптом, определял высотой самого высокого элемента и задавал всем элементам атрибут style =”height: полученое значение

Абсолютно ничего не мешает этот скрипт использовать и здесь

[Дмитрий]

А vuejs это какой-то другой язык? не JS?

Answer 1

[v_i_kaisarov]

можешь так же задать высоту

<style>
.section_item {
  height: 350px;
}
</style>

Или можно сделать чтобы текст был в одну строку

<style>
.section_elem-title {
  white-space: nowrap; /* Запрещаем перенос строк */
  overflow: hidden; /* Обрезаем все, что не помещается в область */
  text-overflow: ellipsis; /* Добавляем многоточие */}
</style>

Comments

[Maксим Волков]

Благодарю! Но использую уже готовую верстку, и хотелось бы решить задачу без помощи CSS.
Кроме того, для адаптивности придется задавать значения под разные разрешения экрана.