Vue JS computed property and jquery

Question

I want to turn an element invisible when a (bootstrap) tab is active.

So, the way I'm trying to do it is creating a computed property that returns if the tab is active using jquery this way:

computed: {
    IsAbainteracoesAtiva: function () {
        return ($('div.active')[1].id == "interacoes")
    }
}

But this computed property always returns false, even if it's true. My guess is that Vue is not updating it.

Any sugestions? I'm opened to other solutions too.

Answer 1

I assume the bootstrap tap is active with a click, otherwise correct me, and I'll come back with another answer.

// Simulate tab
<tab @click="toggleTabState"></tab>

// Simulate bootstrap element to show
<div v-if="tabIsOpen"></div>

export default {
  data() {
    return {
      tabIsOpen: false
    }
  },

  methods: {
    toggleTabState() {
      this.tabIsOpen = !this.tabIsOpen
    }
  }
}

Gonna need some of your HTML to see what else is going on. Are you iterating through a lot of elements with a v-for ?