阅读更多/隐藏按钮工作得很好，但我只是想显示它的情况下，有一个线夹是上级2，我只是没有线索如何解决它

<template>
  <div>
    <div class="d-flex flex-row align-items-center">
      <h4 class="card-title">{{ author }}</h4>

      <h6 class="card-subtitle text-muted ml-3">
        {{ timeAgo(createdAt) }} ago
      </h6>
    </div>

    <p
      class="multiline"
      :style="{'-webkit-line-clamp': computedLineclamp }"
    >
      <b
        class="timestamp"
        v-if="timestamp !== null"
      >
        @{{ timeToHHMMSS(timestamp) }}
      </b>

      {{ content }}
    </p>

    <div>
      <base-button
        v-show="!readmore"
        @click="changeLineclamp()"
        link
        class="text-white p-0"
        size="sm"
      >
        Read more
      </base-button>

      <base-button
        v-show="readmore"
        @click="hideContent()"
        link
        class="text-white p-0"
        size="sm"
      >
        Hide
      </base-button>
    </div> 
  </div>
</template>
  
<script>
// Internal modules
import { timeSince, toHHMMSS } from "@/plugins/timeControls.js";

export default {
    name: "comment-item",
    data() {
        return {
            lineclamp: 2,
            readmore: false,
            showButton: false,
            isMultiline: false,
        }
    },
    props: {
        id: {
            type: String,
            required: true,
        },
        author: {
            type: String,
            required: true,
        },
        createdAt: {
            type: Number,
            required: true,
        },
        timestamp: {
            type: Number,
            required: true,
        },
        content: {
            type: String,
            required: true,
        }
    },
    methods: {
        hideButton(){
            if (this.computedLineclamp) {
                this.readmore;
            }
        },
        changeLineclamp() {
            this.lineclamp = 'initial';
            this.readmore = true;
            this.showButton = false;
        },
        hideContent() {
            this.lineclamp = 2;
            this.readmore = false
        },
        timeAgo(date) {
            return timeSince(date);
        },
        timeToHHMMSS(time) {
            return toHHMMSS(time);
        },
    },
    computed: {
        computedLineclamp() {
            return this.lineclamp;
        },
    },
};
</script>
  
<style lang="scss" scoped>
@import "@/assets/sass/dashboard/custom/_variables.scss";
ul {
    list-style-type: none;
    padding: 0;
}

.button {
    visibility: none;
}
.timestamp {
    color: $primary;
}

.multiline {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    &.__lineclamp{
        -webkit-line-clamp: 2;
    }
    &.__none{
        -webkit-line-clamp: initial;
    }
}

.button-visible {
    display: block;
    color: red;

    &.__none {
        display: none;
    }
}

.hide {
    line-clamp: none;
}
</style>

我尝试在内容中添加v-bind：class="{multiline__lineclamp：showButton==='button-visible'，multiline__none：showButton==='button-visible'}”，但没有效果。我还尝试在脚本部分创建方法，但没有效果

<p
  class="multiline"
  :class="{
    multiline__lineclamp:showButton === 'button-visible',
    multiline__none:showButton === 'button-visible__none'
  }"
  :style="{ '-webkit-line-clamp': computedLineclamp }"
>
  <b
    class="timestamp"
    v-if="timestamp !== null"
  >
    @{{ timeToHHMMSS(timestamp) }}
  </b>

  {{ content }}
</p>