VueJS v-if for disable / enable buttons

Question

My use case is something like this.

I have a html <p> element which's id is "demo".
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

computed properties / watchers
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>

connexo · Accepted Answer · 2018-03-20 04:09:20Z

8

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.

answered Mar 20, 2018 at 4:09

connexo

57.2k15 gold badges112 silver badges149 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

VueJS v-if for disable / enable buttons

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related