CODEWITHSUNDEEP
javascriptvue.js
Manasa R
Manasa R

Reputation: 23

Hide empty tabs If it has no content

How to "Hide empty tabs" If it has no content to show in Vue js???

      <ul class="nav nav-tabs" role="tablist">
        <li class="nav-item">
          <a
            class="nav-link active"
            id="description-tab"
            data-toggle="tab"
            href="#description"
            role="tab"
            aria-controls="description"
            aria-selected="true">{{ ('Description') }}</a>
        </li>
        <li class="nav-item">
          <a
            class="nav-link"
            id="specification-tab"
            data-toggle="tab"
            href="#specification"
            role="tab"
            aria-controls="specification"
            aria-selected="false">{{ ('Specification') }}</a>
        </li>
      </ul>

      <div class="tab-content py-4">
        <div 
          class="tab-pane fade show active"
          id="description"
          role="tabpanel"
          aria-labelledby="description-tab"
          v-html="product.description">
          </div>
        <div 
          class="tab-pane fade"
          id="specification"
          role="tabpanel"
          aria-labelledby="specification-tab"
          v-html="product.specification">
          </div>
      </div>

Tried this: [didn't work]

hidetabs () {

const tabs = document.querySelectorAll(".tab-content py-4 > div[id^=tab]:empty");
for (const tab of tabs) {
  console.log("hi")

  document.querySelector(`a[href="${tab.id}"]`).parentNode.remove();
}},

Upvotes: 1

Views: 403

Answers (1)

Tamas Szoke
Tamas Szoke

Reputation: 5542

As the comment suggests, in Vue.js you got the v-if directive, which is used to conditionally render a block. The block will only be rendered if the directive’s expression returns a truthy value.

A small example from the documentation:

<h1 v-if="awesome">Vue is awesome!</h1>

So with your code it could be similar to this:

<ul class="nav nav-tabs" role="tablist">
  <li v-if="product.description" class="nav-item">
    <a class="nav-link active" id="description-tab" data-toggle="tab" href="#description" role="tab" aria-controls="description" aria-selected="true">{{ ('Description') }}</a>
  </li>
  <li v-if="product.specification" class="nav-item">
    <a class="nav-link" id="specification-tab" data-toggle="tab" href="#specification" role="tab" aria-controls="specification" aria-selected="false">{{ ('Specification') }}</a>
  </li>
</ul>

<div class="tab-content py-4">
  <div v-if="product.description" class="tab-pane fade show active" id="description" role="tabpanel" aria-labelledby="description-tab" v-html="product.description">
  </div>
  <div v-if="product.specification" class="tab-pane fade" id="specification" role="tabpanel" aria-labelledby="specification-tab" v-html="product.specification">
  </div>
</div>

I hope it helps!

Upvotes: 1

Related Questions