根据另一个元素 vue 的属性有条件地渲染 div

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>在mounted我收到一个 this.$refs[“title-data”]未定义但 This.$refs存在的错误，它显示了正确的参考。我不确定为什么。感谢您的任何帮助！

Answer 1

您可以创建一个计算属性来检查文本的长度是否超过给定的数字。

    computed: {

             isTextLengthLongEnough() {

              if(el.offsetHeight > 150) {

              this.showButton = true;

                }

              }

然后，您可以使用计算属性是 true 还是 false 来检查模板，v-if然后显示按钮。

Answer 2

不幸的是，我无法获得上述任何一个答案。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'

        }

      }

    },