如何根据VueJS中激活的菜单选项卡在同一按钮上的功能之间进行切换？

Question

我正在完成我的web应用程序，我正在努力编写一些代码。我在一个页面中有两个选项卡，取决于按钮将触发一个函数，例如，如果我在第一个选项卡中，按钮单击将调用一个函数来执行特定选项卡中的某些操作，如果我在第二个选项卡中(第二个选项卡是活动的)，我的按钮(当然我指的是同一个按钮)将在第二个选项卡上触发另一个函数。

我使用了一个用Vue组件创建的按钮，里面有一个函数(用于第一个选项卡)，然后第二个函数是在组件外部声明的另一个Vue实例。

Vue component('buttonMaster', {
template: '<div id="sys" v-if="tab_main"><button class="btn btn-primary btn-sm rounded m1-2" @click="sendTrad" id="but" name="but">EXAMPLE</button></div>'

methods: {
    sendT: function (event) {
        'some code' 
  }
});

然后使用第二个函数创建一个vue实例：

let example = new Vue({

el: '#butt2',   
methods: {
    sendP: function() {
        'another code'  
   }
});

我在考虑在模板中实现一个v-if，比如：

<div id="butt" v-if="tab_main"><button class="btn btn-primary btn-sm rounded m1-2" @click="sendT" id="butt" name="butt">EXAMPLE</button></div>    
+
<div id="butt2"><button class="btn btn-primary btn-sm rounded m1-2" @click="sendP" id="butt2" name="butt2">EXAMPLE_2</button></div>

但是我不明白，我应该创建一个简单的按钮吗？或者我只是误解了v-if条件是如何工作的？

Answer 1

基本上有两种方法可以做到这一点。首先使用v-if和v-else并复制按钮(取决于所选的选项卡)，每个按钮都调用一个不同的函数。

template: '<div id="sys" v-if="tab_main"><button @click="sendTrad" id="but" name="but">EXAMPLE</button></div>'
template: '<div id="sys2" v-if="!tab_main"><button @click="sendSecondaryTrad" id="but2" name="but2">EXAMPLE</button></div>'

其次-在功能逻辑上，验证选择了什么选项卡，并在此基础上更改执行的代码。

methods: {
   sendT(event) {
      if (this.tab_main) {
        //do Something
      } else {
        // do other thing
      }
   }
};