Vue JS 计算属性和 jquery答案

【问题标题】：Vue JS computed property and jqueryVue JS 计算属性和 jquery
【发布时间】：2019-09-22 00:12:18
【问题描述】：

我想在（引导）选项卡处于活动状态时使元素不可见。

所以，我尝试这样做的方式是创建一个计算属性，如果选项卡处于活动状态，则使用 jquery 以这种方式返回：

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

但是这个计算属性总是返回假，即使它是真的。我的猜测是 Vue 没有更新它。

有什么建议吗？我也愿意接受其他解决方案。

【问题讨论】：

标签： javascript jquery vue.js

【解决方案1】：

我假设通过单击激活引导水龙头，否则请纠正我，我会回来提供另一个答案。

// 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
    }
  }
}

需要您的一些 HTML 来查看其他情况。您是否使用 v-for 遍历了很多元素？

【讨论】：

是的，单击即可激活引导选项卡。不，我只是使用 v-if 来检查。
根据您的回答，我将“IsAbainteracoesAtiva”设置为“正常”属性，并在每个选项卡中添加了v-on:click.prevent="IsAbainteracoesAtiva = false" 或v-on:click.prevent="IsAbainteracoesAtiva = false"，现在可以使用了。谢谢！