Javascript 如何临时禁用Vue JS中有条件呈现的按钮？

我有两组有条件渲染的按钮

当竞选活动正在进行时

当竞选活动没有进行时

我想做的是在活动暂停5秒后禁用播放按钮

这是我的标记：

<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='run-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='run-button'>
    <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='run-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='run-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>

有了这个逻辑，我可以让按钮在5秒钟后被初始启用和禁用，但是如果我将布尔值的第一行设置为真，第二行设置为假，不知何故会把一切都搞糟。为什么会这样

---

如何正确实现这一点？

不要将Vue和直接DOM操作混用在一起

这里的最佳解决方案是创建一个属性，该属性将显示暂停时间是否超过5秒，并将该属性添加到：disabled

比如说,

data() {
  return {
    // ...
    pausedFor5Seconds: false,
    // ...
  };
},
// ...
methods: {
  // ...
  pause() {
    // some mutation that sets campaign.state to "Paused"
    this.pausedFor5Seconds = false;
    setTimeout(() => this.pausedFor5Seconds = true, 5000);
  },
  play() {
    // some mutation that sets campaign.state to "Running"
    this.pausedFor5Seconds = false;
  }
}

正如评论中所说，暂停并播放您修改campaign.state的方法

在模板中添加：disabled=暂停5秒：

---

而且id不再是必需的，顺便说一句，您有多个元素具有相同的run button id-这是无效的HTML，会弄乱您的文档。GetElementByID。

您不应该将vanilla javascript与vue组合在一起，这可能会导致vue在您不需要时还原对元素的某些修改，或者不注意这些更改，并在其他地方重新使用元素，否则元素应该是唯一的。问题是，您有许多相同id的元素。如果只更改按钮，您将实际停止，它可能会工作。@Ferrybig Vue 2是否真的有与此vanilla JS解决方案等效的解决方案？我看到他们不赞成v2中的这些功能在数据中添加playdenabled:false，并在超时内执行此操作。在数组函数中playdenabled=true，然后在视图中do:disabled=playdenabled，这并不能解决您原来的问题however@VictorOliveira事实上在此之前，我所做的是将id单独添加到播放按钮。结果是得到一个nullThank you@acdcjunior的无法设置属性'disabled'！不过还是有点变化。有一个changeActiveStatusFunction，它是将campaign.state设置为作为参数输入的给定状态的变体。添加“``vc.pausedFor5Seconds=true；setTimeout=>this.pausedFor5Seconds=false，5000```注意这里的反向布尔逻辑会解决这个问题。哦，我明白了，是的，有道理。

data() {
  return {
    // ...
    pausedFor5Seconds: false,
    // ...
  };
},
// ...
methods: {
  // ...
  pause() {
    // some mutation that sets campaign.state to "Paused"
    this.pausedFor5Seconds = false;
    setTimeout(() => this.pausedFor5Seconds = true, 5000);
  },
  play() {
    // some mutation that sets campaign.state to "Running"
    this.pausedFor5Seconds = false;
  }
}

<md-button v-on:click='changeCampaignStatus(campaign.id, "Running")'
  v-if='campaign.state==="Paused"' class='md-icon-button md-accent md-raised'
  :disabled="pausedFor5Seconds">
    <md-icon>play_arrow</md-icon>
</md-button>