Vue JS中如何临时禁用条件渲染按钮？含活动暂停禁用场景

第一步：修正重复ID的问题 #

首先要明确：HTML中的ID必须是唯一标识，你现在给多个按钮都设置了id='run-button'，这违反了规范，会导致后续通过ID选择元素、绑定事件时出现冲突。建议给每个功能按钮设置独立的ID，比如：

• 暂停按钮用pause-button
• 播放按钮用play-button
• 停止按钮用stop-button
• 删除按钮用delete-button

第二步：实现“暂停5秒后禁用播放按钮”的逻辑 #

我们可以借助Vue的响应式状态配合定时器来实现这个需求，具体步骤如下：

1. 在组件data中添加控制变量 #

先定义两个变量：一个用于标记播放按钮是否禁用，另一个存储定时器实例（方便后续清理）：

data() {
  return {
    // 其他原有数据...
    isPlayDisabled: false,
    pauseTimer: null
  }
}

2. 修改状态变更方法，添加定时器逻辑 #

在changeCampaignStatus方法里，当活动状态切换为Paused时启动5秒定时器，时间到后禁用播放按钮；如果活动重新切换为Running，则立即启用播放按钮并清理定时器：

methods: {
  async changeCampaignStatus(campaignId, newStatus) {
    // 先执行你的状态变更逻辑（比如调用后端接口）
    // 假设这里是异步请求，用await等待结果
    // await yourApiCall(campaignId, newStatus);

    // 处理播放按钮禁用逻辑
    if (newStatus === "Paused") {
      // 启动5秒定时器
      this.pauseTimer = setTimeout(() => {
        this.isPlayDisabled = true;
      }, 5000);
    } else if (newStatus === "Running") {
      // 重新运行时，恢复播放按钮可用并清理定时器
      this.isPlayDisabled = false;
      if (this.pauseTimer) {
        clearTimeout(this.pauseTimer);
        this.pauseTimer = null;
      }
    }
  },
  // 其他原有方法...
}

3. 更新模板代码，绑定禁用状态并修正ID #

把播放按钮的:disabled绑定到我们定义的状态变量，同时修正所有按钮的ID：

<div class='m1 '>
  <!-- 暂停按钮：活动运行时显示 -->
  <md-button 
    v-on:click='changeCampaignStatus(campaign.id, "Paused")' 
    v-if='campaign.state==="Running"' 
    class='md-icon-button md-accent md-raised' 
    id='pause-button'
  >
    <md-icon>pause</md-icon>
  </md-button>

  <!-- 播放按钮：活动暂停时显示，绑定禁用状态 -->
  <md-button 
    v-on:click='changeCampaignStatus(campaign.id, "Running")' 
    v-if='campaign.state==="Paused"' 
    class='md-icon-button md-accent md-raised' 
    id='play-button'
    :disabled="isPlayDisabled"
  >
    <md-icon>play_arrow</md-icon>
  </md-button>

  <!-- 停止按钮：活动暂停时显示 -->
  <md-button 
    v-on:click='changeCampaignStatus(campaign.id, "Canceled")' 
    v-if='campaign.state==="Paused"' 
    class='md-icon-button md-accent md-raised' 
    id='stop-button'
  >
    <md-icon>stop</md-icon>
  </md-button>

  <!-- 删除按钮：活动已取消时显示 -->
  <md-button 
    v-on:click='deleteCampaign(campaign.id)' 
    v-if='campaign.state==="Canceled"' 
    class='md-icon-button md-accent md-raised' 
    id='delete-button'
  >
    <md-icon>delete_forever</md-icon>
  </md-button>

  <!-- 复制按钮：始终显示 -->
  <md-button 
    v-on:click='duplicateCampaign(campaign.id)' 
    class='md-icon-button md-accent md-raised'
  >
    <md-icon>content_copy</md-icon>
  </md-button>

  <!-- 编辑按钮：活动暂停时显示 -->
  <md-button 
    v-on:click='goToEdit' 
    v-if='campaign.state==="Paused"' 
    class='md-icon-button md-accent md-raised'
  >
    <md-icon>mode_edit</md-icon>
  </md-button>

  <div>
    <md-chip v-for='tag in campaign.tags' :key='tag' class='mr1'>{{tag}}</md-chip>
  </div>
</div>

额外注意事项 #

• 为了避免内存泄漏，记得在组件销毁前清理定时器：

beforeUnmount() {
  if (this.pauseTimer) {
    clearTimeout(this.pauseTimer);
  }
}

• 如果你的状态变更依赖异步接口请求，一定要把定时器逻辑放在接口请求成功的回调里，确保活动状态确实变为Paused后再启动定时器。

内容的提问来源于stack exchange，提问作者Esteban Vargas