Laravel + VUE：如何在同一个刀片中显示2个不同的div和2个不同的按钮

Question

大家晚安！

当我有两个不同的按钮时，我有一个刀片：

<div class="col-md-12">
            <button v-on:click="isHidden = !isHidden"  type="button" class="w3-btn w3-blue" style="width:40%"><i class="fa fa-table fa-2x"></i> <br>SCHEDULE DATE</button>
            <br/> <br/>
            <button v-on:click="isHidden = !isHidden"  type="button" class="w3-btn w3-blue" style="width:40%"><a href="" class="text-white"><i class="fa fa-table fa-2x"></i> <br>SHOW DATES</a></button>
</div>


<div class="col-md-12 col-xl-12">
  <scheduledate v-if="!isHidden"></scheduledate>
  </div>

  <div class="col-md-12 col-xl-12">
  <showdate v-if="!isHidden"></showdate>


</div>

我的问题是，当我点击一个或其他按钮时如何显示 div？我希望当我单击 SCHEDULE BUTTON 时显示/取消隐藏我如果单击 SHOW DATE 按钮，显示/取消隐藏我。这是我的 app.js

Vue.component('scheduledate', require('./components/scheduledate.vue').default);

Vue.component('showdate', require('./components/showdate.vue').default);

var app = new Vue({
    el: '#date',
   data: {
        isHidden: true
   }
});

var app = new Vue({
    el: '#showdate',
    data: {
        isHidden: true
    }
});

谢谢

Answer 1

像这样为他们创建 2 个不同的数据

<div class="col-md-12">
<button v-on:click="scheduledate = !scheduledate"  type="button" class="w3-btn w3-blue" style="width:40%"><i class="fa fa-table fa-2x"></i> <br>SCHEDULE DATE</button>
<br/> <br/>
<button v-on:click="showdate = !showdate"  type="button" class="w3-btn w3-blue" style="width:40%"><a href="" class="text-white"><i class="fa fa-table fa-2x"></i> <br>SHOW DATES</a></button>
</div>


<div class="col-md-12 col-xl-12">
    <scheduledate v-if="scheduledate"></scheduledate>
</div>

<div class="col-md-12 col-xl-12">
    <showdate v-if="showdate"></showdate>
</div>

和

var app = new Vue({
    el: '#showdate',
    data: {
        scheduledate: true,
        showdate:true
    }
});