[Vuejs]-Show text in p tag if button is disabled vue.js

by

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>
👤Debug Diva

0👍

Within this code line you use button and disabledButton.

Where did you define button and disabledButton ?

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

Leave a comment