title: How to temporarily disable conditionally rendered buttons in Vue JS?
body: <p>I have 2 groups of conditionally rendered buttons. </p>
  
  <p>When a campaign is running
  <a href="https://i.stack.imgur.com/HFOxI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HFOxI.png" alt="enter image description here"></a></p>
  
  <p>When a campaign isn't running 
  <a href="https://i.stack.imgur.com/vC9nl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vC9nl.png" alt="enter image description here"></a></p>
  
  <p>What I want to do is disable the play button after the campaign has been paused for 5 seconds.</p>
  
  <p>This is my markup:</p>
  
  <pre><code>&lt;div class='m1 '&gt;
  
    &lt;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'&gt;
      &lt;md-icon&gt;pause&lt;/md-icon&gt;
    &lt;/md-button&gt;
  
    &lt;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'&gt;
      &lt;md-icon&gt;play_arrow&lt;/md-icon&gt;
    &lt;/md-button&gt;
  
    &lt;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'&gt;
      &lt;md-icon&gt;stop&lt;/md-icon&gt;
    &lt;/md-button&gt;
  
    &lt;md-button v-on:click='deleteCampaign(campaign.id)' v-if='campaign.state==="Canceled"' class='md-icon-button md-accent md-raised' id='run-button'&gt;
      &lt;md-icon&gt;delete_forever&lt;/md-icon&gt;
    &lt;/md-button&gt;
  
    &lt;md-button v-on:click='duplicateCampaign(campaign.id)' class='md-icon-button md-accent md-raised'&gt;
      &lt;md-icon&gt;content_copy&lt;/md-icon&gt;
    &lt;/md-button&gt;
  
    &lt;md-button v-on:click='goToEdit'  v-if='campaign.state==="Paused"' class='md-icon-button md-accent md-raised'&gt;
      &lt;md-icon&gt;mode_edit&lt;/md-icon&gt;
    &lt;/md-button&gt;
    &lt;div&gt;
      &lt;md-chip v-for='tag in campaign.tags' :key='tag' class='mr1'&gt;{{tag}}&lt;/md-chip&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'm not exactly sure which buttons should have the <code>id='run-button'</code>, I believe the conditional rendering is making the following setTimeout behave strangely:</p>
  
  <pre><code>  document.getElementById("run-button").disabled = false;
    setTimeout(function(){document.getElementById("run-button").disabled = true;},5000);
  </code></pre>
  
  <p>With this logic I can get the button to be initially enabled and be disabled after 5 seconds, but if I switch the booleans (first line <code>true</code>, second line <code>false</code>) it somehow just messes up everything. Why is this happening?</p>
  
  <p>How can I implement this correctly?</p>