【问题标题】：How to switch tabs in Vue using Semantic-UI如何使用 Semantic-UI 在 Vue 中切换选项卡
【发布时间】：2018-08-23 21:55:09
【问题描述】：

简单示例

在semantic-ui's tab example page 中，他们有这个关于如何在选项卡之间切换的示例（我也将其放入此jsfiddle）：

HTML

<div class="ui top attached tabular menu">
  <a class="item" data-tab="first">First</a>
  <a class="item" data-tab="second">Second</a>
</div>
<div class="ui bottom attached tab segment" data-tab="first">
  First
</div>
<div class="ui bottom attached tab segment" data-tab="second">
  Second
</div>

jQuery

$('.menu .item').tab();

这在一个简单的网页中完美运行。

Vue 示例 1

但是，在 Vue 中，我在 jsfiddle 中的这段代码似乎不起作用（添加了 jquery、semantic.js 和 semantic.css 资源）：

HTML

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  <div class="ui container">
    <div class="ui top attached tabular menu">
      <a 
        class="item active" 
        data-tab="hello"
        @click="switchTab()"
      >
        Hello
      </a>
      <a 
        class="item" 
        data-tab="world"
        @click="switchTab()"
      >
        World
      </a>
    </div>
    <div class="ui bottom attached tab segment active" data-tab="hello">
      <p>Greetings!</p>
    </div>
    <div class="ui bottom attached tab segment" data-tab="world">
      <p>Earth!</p>
    </div>
  </div>
</div>

new Vue({
  el: '#app',
  methods: {
    switchTab() {
      $('.menu .item').tab();
      console.log('Tab was clicked!');
    },
  },
});

单击选项卡确实会登录到控制台，但 jQuery 不会执行。

Vue 示例 2

我认为可能是在Vue中使用jQuery有问题，所以我尝试了另一种方法，将active类属性动态附加到tab。

您可以查看jsfiddle 中的代码。

HTML

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  <div class="ui container">
    <div class="ui top attached tabular menu">
      <a 
        class="item" 
        data-tab="hello"
        :class="{ active: isHelloActive }"
        @click="switchTabs('hello')"
      >
        Hello
      </a>
      <a 
        class="item" 
        data-tab="world"
        :class="{ active: isWorldActive }"
        @click="switchTabs('world')"
      >
        World
      </a>
    </div>
    <div 
      class="ui bottom attached tab segment" 
      data-tab="hello"
      :class="{ active: isHelloActive }"
    >
      <p>Greetings!</p>
    </div>
    <div 
      class="ui bottom attached tab segment" 
      data-tab="world"
      :class="{ active: isWorldActive }"
    >
      <p>Earth!</p>
    </div>
  </div>
</div>

new Vue({
  el: '#app',
  data() {
    return {
      isHelloActive: true,
      isWorldActive: false,
    }
  },
  methods: {
    switchTabs(tab) {
      if (tab === 'hello') {
        isHelloActive = true;
        isWorldActive = false;
      } else {
        isHelloActive = false;
        isWorldActive = true;
      }

      console.log('isHelloActive: ' + isHelloActive);
      console.log('isWorldActive: ' + isWorldActive);
      console.log('===');
    },
  },
});

当我单击特定选项卡时，控制台会正确记录，但仍不会切换。

如何使用 Semantic UI 在 Vue 中切换选项卡？我还想使用许多其他语义模块，它们使用 jQuery 来运行。

我也对semantic-ui-vue 没有Tab 模块感到失望。

【问题讨论】：

您正在以比实际更复杂的方式处理这个问题。首先创建一个标签名称对象数组：hello, world .. 并使用 v-for 循环和渲染，同时您可以使用 @click 事件来侦听单击了哪个标签...我在工作，如果您没有得到答案，请联系我，我稍后会尝试提供一个可行的示例

标签： javascript jquery vue.js semantic-ui

【解决方案1】：

我已经弄清楚出了什么问题。

Vue 不适合 jQuery。
Vue 不能很好地与没有与其稳固集成的 UI 框架配合使用（有 semantic-ui-vue 库，但它不具备基本语义 UI 所具有的所有功能。
为了引用组件级变量，您需要使用this。否则 Vue 不会抛出错误，因此很难调试。工作中的jsfiddle 显示了一个工作示例。

Vue forum 回答了我的问题，如果您有 Vue 特定的问题，您应该将它们用作资源。

【讨论】：