javascript - 如何使用 Semantic-UI 在 Vue 中切换选项卡

Question

简单示例

在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>

JS

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

点击选项卡会记录到控制台，但 jQuery 不会执行。

Vue 示例 2

我想可能在 Vue 中使用 jQuery 有问题，所以我尝试了一种不同的方法，将 active 类属性动态附加到选项卡。

您可以查看此 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>

JS

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('===');
    },
  },
});

当我单击特定选项卡时，控制台已正确记录，但它仍然没有切换。

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

我也很失望semantic-ui-vue没有 Tab 模块。

Answer 1

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

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

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