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

问题描述

大家晚安！

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

<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 按钮时显示/取消隐藏我，如果点击 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
    }
});

谢谢

解决方法

像这样为他们创建 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
    }
});