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

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

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

but this shows the p tag all the time.

CodePudding user response：

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 >
  <button
          type="submit"
          @click="getResult"
          :disabled="!enableButton"
          >
    Click Me
  </button>
  <p v-if="!enableButton">error</p>
</div>

CodePudding user response：

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

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