CODEWITHSUNDEEP
vue.jsvuejs2
margherita pizza
margherita pizza

Reputation: 7145

VueJS v-if for disable / enable buttons

My use case is something like this.

  1. I have a html <p> element which's id is "demo".
  2. I want to read that <p> element through v-if and if the value inside that

    element equals to the "EXPIRED" then I want to remove the disabled attribute in my button.

Future explaining my use case, I want to initially disabled my button and when the status updated to EXPIRED in that paragraph I want remove that disabled part from my button.

How to I achieve this using

  1. computed properties / watchers
  2. v-if

<template lang="html">
  <div class="">
    <p id="demo"></p>
    <button type="button" name="button" class="btn btn-primary" disabled>Start</button>
  </div>
</template>

Upvotes: 3

Views: 11752

Answers (1)

connexo
connexo

Reputation: 56720

If you are setting this EXPIRED stuff using non-Vue DOM manipulation you are lost. Don't mix that with Vue. Instead I would do this:

<template lang="html">
  <div class="">
    <p id="demo">{{ status }}</p>
    <button type="button" name="button" class="btn btn-primary" :disabled="status !== 'EXPIRED'">Start</button>
  </div>
</template>

status being a property of your VM in the data() function.

Upvotes: 8

Related Questions