условно отображать div на основе атрибутов другого элемента vue

Question

У меня есть небольшой контейнер текста. То, что я пытаюсь сделать, это: если длина текста большая, сверните div, затем нажмите кнопку с надписью «... показать больше», после того как вы нажмете, раскроет div. нажатие снова сворачивает div.

Это нормально и работает.

У меня проблема в данный момент. Для div изначально установлено значение collapse = true. Отображается кнопка «... показать больше».

Я хочу изменить следующее: если текстовое содержимое не длинное, оно не будет свернуто, кнопка показать больше не будет отображаться.

Шаблон

  <v-card v-show="showAccount" class="mb-4">
          <v-card-title class="title-container align-start">
      <div class="title-data" :class="{collapsed: isElementOverflown}" ref="title-data">
        <h1 class="title mb-2"><router-link :to="{name: 'profile', params: {account: account.account}}">{{ account.account }}</router-link></h1>
        <router-link v-if="isActiveUserAccount" :to="{name: 'account-image', params: {account: account.account}}">
          <v-avatar color="#c35219" size="56" class="mr-4 mb-2">
            <img v-if="accountMedia" :src="accountMedia" :alt="account.account" />
            <span v-else class="white--text headline">{{ account.account[0].toUpperCase() }}</span>
          </v-avatar>
        </router-link>
        <template v-else>
          <v-avatar color="#c35219" size="56" class="mr-4 mb-2">
            <img v-if="accountMedia" :src="accountMedia" :alt="account.account" />
            <span v-else class="white--text headline">{{ account.account[0].toUpperCase() }}</span>
          </v-avatar>
        </template>
        <div class="caption my-0" ref="bio">
          <nl2br v-if="account.about" tag="p" :text="account.about"></nl2br>
        </div>
      </div>
      <button v-if="showButton" type="button" style="font-size:small; margin: auto; margin-right: 5%" @click="toggleHeight">
        {{showMoreTextLabel}}
        </button>
    </v-card-title>

JS

      mounted() {
  // elements have been created, so the `ref` will return an element.
  // but the elements have not necessarily been inserted into the DOM yet.
  // you can use $nextTick() to wait for that to have happened.
  // this is espeically necessary if you want to to get dimensions or position of that element.
  this.$nextTick(() => {
    console.log("refs", this.$refs);  // logs correct this.$refs
    console.log("$refs.title-data", this.$refs["title-data"]); //undefined

    let el = this.$refs["title-data"];
    if (el.offsetHeight < el.scrollHeight || el.offsetWidth < el.scrollWidth) {
      this.isElementOverflown = true;
      this.showButton = true;
    }
  })
},



toggleHeight() {
        if (this.$refs && 'title-data' in this.$refs) {
          this.$refs['title-data'].classList.toggle('collapsed');
          this.$refs['title-data'].classList.contains('collapsed')
                  ? this.showMoreTextLabel = "...show more"
                  : this.showMoreTextLabel = "...show less";
        }
      },

В mounted Я получаю сообщение об ошибке, что this.$refs[“title-data”] не определено, но This.$refs есть и показывает правильные ссылки. Я не уверен почему.

Спасибо за любую помощь!

Answer 1

К сожалению, я не смог заставить ни один из приведенных выше ответов работать. el выдвигался как неопределенный, так что если бы кто-то мог объяснить мне, основываясь на коде, который у меня есть в вопросе, как получить el, это было бы здорово.

Я обошелся не идеально, но это работает где у меня есть код в updated, так что я собираюсь с этим сейчас. Большое спасибо всем за помощь

Вот код, который я использовал

   updated() {
      if ('title-data' in this.$refs) {
        const el = this.$refs['title-data']
        const heightDiff = Boolean(el.scrollHeight - el.offsetHeight > ALLOWED_HEIGHT_VARIANCE)
        if (heightDiff) {
          this.showButton = heightDiff
          el.className += ' read-more'
        }
      }
    },

Answer 2

Вы можете создать вычисляемое свойство, которое проверяет, превышает ли длина вашего текста заданное число.

    computed: {
             isTextLengthLongEnough() {
              if(el.offsetHeight > 150) {
              this.showButton = true;
                }
              }

Затем вы можете проверить свой шаблон с помощью v-if, если это вычисленное свойство имеет значение true или false и затем отображать кнопку или нет.