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

Issue

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.

Solution

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 By – Rohìt Jíndal

Answer Checked By – Clifford M. (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.