Show text in p tag if button is disabled vue.js

Question

I want to make a conditional p tag that appears only if a button is disabled I currently have this:

  <div class="finishTest">
    <button
      form="answerForm"
      type="submit"
      @click="getResult"
      :disabled="!this.enableButton()"
      :class="{
        disabledButton: !this.enableButton(),
      }"
    >
      {{ t("finish") }}
    </button>
    <p v-if="button == disabledButton">error</p>
  </div>

but this shows the p tag all the time.

Rohìt Jíndal · Accepted Answer · 2022-06-01 09:42:19Z

3

Don't confuse with the style class variable. You can easily achieve this with !enableButton.

Try <p v-if="!enableButton">error</p> instead of <p v-if="button == disabledButton">error</p>

Demo :

new Vue({
  el: '.finishTest',
  data: {
    enableButton: true
  },
  methods: {
    getResult() {
        this.enableButton = false
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div class="finishTest">
  <button
          type="submit"
          @click="getResult"
          :disabled="!enableButton"
          >
    Click Me
  </button>
  <p v-if="!enableButton">error</p>
</div>

answered Jun 1, 2022 at 9:42

Rohìt Jíndal

27.4k16 gold badges80 silver badges133 bronze badges

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

Comments

Jarne · Accepted Answer · 2022-06-01 08:02:35Z

0

Within this code line you use button and disabledButton.
Where did you define button and disabledButton ?

 <p v-if="button == disabledButton">error</p>

answered Jun 1, 2022 at 8:02

Jarne

1396 bronze badges

2 Comments

Ibrahim Over a year ago

I didnt define them I just wrote is as an example to try and show what im trying to achieve.

Jarne Over a year ago

The answer below is the correct answer on how to do this. Try not to complicate things too much.

Collectives™ on Stack Overflow

Show text in p tag if button is disabled vue.js

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related