Как выделить элемент с динамическим содержимым?

Question

[VaaL2004]

Здравствуйте, столкнулся с такой проблемой: как во Vue.js выделить , в который динамически изменяется.
Т.е. у нас есть несколько контейнеров, которые выводятся через v-for. Содержимое массива изменяется (туда приходят какие-либо сообщения). Контейнеры всегда одного размера по ширине и высоте (overflow: hidden). Необходимо назначить css-класс на те контейнеры, содержимое которых не помещается в них, для того, чтобы пользователь понимал, что по ним можно кликнуть и они развернутся.

Пример: https://jsfiddle.net/VaaL2004/a1nh82d0/

Answer 1

[Konstantin Malyarov]

:class = { 'css_class': string.count}

Тут написало, как сделать нижнюю границу прозрачной без css.
https://m.habr.com/post/116646/

Тут более подробно описано как сделать класс, при условиях.
https://youtu.be/EOSJ_6gXTnM

Comments

[VaaL2004]

:class = { 'css_class': string.count}

Если я вас правильно понял, то класс будет применяться всегда.
https://jsfiddle.net/VaaL2004/a1nh82d0/1/

Решение не очень подходит, потому, что нужно будет ещё курсор менять на pointer, а поскольку класс применяется ко всем, то курсор будет у всех элементов.

А вот за ссылку на хабр спасибо большое :)

[Konstantin Malyarov]

VaaL2004,

<div class='content-block expandable' v-for="content in contents" @click="expand()" :class="{'expandable': contentSize(content)}">
    {{ content }}
  </div>

Дальше в методах экземпляра:
contentSize: function (content) : {
// вычисляете свойство и возвращаете true или false
}

[VaaL2004]

Konstantin Malyarov, спасибо! Мне помогло! :)