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

Question

简单示例

在semantic-ui's tab example page中，他们有关于如何在标签之间切换的示例（我还将其放入此jsfiddle中）：

HTML

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

的jQuery

jquery

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

Vue示例1

但是，在Vue中，我将此代码放在jsfiddle中似乎不起作用（使用semantic.js，semantic.css和<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> 资源加）：

HTML

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

JS

active

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

Vue示例2

我认为在Vue中使用jQuery可能有问题，所以我尝试了另一种方法，动态地将<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> 类属性附加到tab。

您可以查看此jsfiddle中的代码。

HTML

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

JS

Tab

单击特定选项卡时，控制台会被适当记录，但仍然无法切换。

如何使用Semantic UI在Vue中切换标签？还有许多我想使用的语义模块，它们使用jQuery来运行。

我也很失望semantic-ui-vue没有<script src="http://maps.googleapis.com/maps/api/js?libraries=places"></script> <script src="jquery.geocomplete.js"></script> 模块。

Answer 1

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

1. Vue并不适合使用jQuery。
2. Vue并没有很好地使用没有与它完全集成的UI框架（那里有semantic-ui-vue库，但它没有全部基本语义ui具有的特征。
3. 要引用组件级变量，您需要使用this。否则Vue不会抛出错误，因此调试起来很困难。工作jsfiddle显示了一个工作示例。

我的问题已在Vue forum中得到解答，如果您有特定于Vue的问题，则应将其用作资源。