Laravel+Vue：同一Blade中双按钮分别控制不同Div显示隐藏

你现在遇到的核心问题是两个按钮共用了同一个状态变量，还创建了两个独立的Vue实例，导致点击任意按钮都会同时影响两个组件的显示状态。咱们来一步步调整，实现每个按钮单独控制对应组件的需求：

第一步：合并Vue实例，拆分独立状态变量 #

不需要创建两个Vue实例，一个实例就能管理页面内的所有状态。把原来的单个isHidden拆成两个独立变量，分别对应两个组件的显示状态：

修改你的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: { 
    // 分别定义两个状态变量，初始可设为隐藏（按需调整）
    isScheduleVisible: false,
    isShowDatesVisible: false
  } 
});

第二步：修改按钮事件与组件显示条件 #

给每个按钮绑定对应的状态切换逻辑，同时调整组件的v-if条件，让它们各自对应自己的状态变量。另外注意第二个按钮里的<a>标签会触发页面跳转，这会破坏Vue的单页交互，直接移除即可：

修改你的Blade页面代码：

<div class="col-md-12"> 
  <button v-on:click="isScheduleVisible = !isScheduleVisible" 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="isShowDatesVisible = !isShowDatesVisible" type="button" class="w3-btn w3-blue" style="width:40%">
    <i class="fa fa-table fa-2x"></i> <br>SHOW DATES
  </button> 
</div> 
<div class="col-md-12 col-xl-12"> 
  <scheduledate v-if="isScheduleVisible"></scheduledate> 
</div> 
<div class="col-md-12 col-xl-12"> 
  <showdate v-if="isShowDatesVisible"></showdate> 
</div>

改动说明 #

• 拆分状态变量：用isScheduleVisible单独控制scheduledate组件，isShowDatesVisible单独控制showdate组件，两个状态互不干扰；
• 移除多余<a>标签：原标签会触发页面刷新，破坏Vue交互逻辑，移除后完全不影响按钮样式与功能；
• 合并Vue实例：单个实例即可统一管理页面状态，多个实例会造成状态隔离，反而增加控制复杂度。

调整完成后，点击「SCHEDULE DATE」只会切换scheduledate组件的显示隐藏，点击「SHOW DATES」只会切换showdate组件的显示隐藏，完全符合你的需求~

内容的提问来源于stack exchange，提问作者Beto A. Lien