Laravel+VUE：如何在同一个 blade 中使用 2 个不同的按钮显示 2 个不同的 div

Question

大家晚安！

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

<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/unhide me the if Click on the SHOW DATE button, show/unhide me the .这是我的 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
    }
});

Laravel+VUE：如何在同一个 blade 中使用 2 个不同的按钮显示 2 个不同的 div

Laravel+VUE: How to show 2 different div with 2 different buttons in the same blade

laravel

vue.js

laravel-5.7