如果禁用按钮，则在 p 标签中显示文本 vue.js

Question

我想制作一个只有在按钮被禁用时才会出现的条件 p 标签我目前有这个：

  <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>

但这一直显示 p 标签。

Answer 1

在此代码行中，您使用按钮和禁用按钮。
你在哪里定义 button 和 disabledButton ?

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

Answer 2

不要与样式 class 变量混淆。您可以使用 !enableButton.

轻松实现此目的

尝试 <p v-if="!enableButton">error</p> 而不是 <p v-if="button == disabledButton">error</p>

演示 :

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>

如果禁用按钮，则在 p 标签中显示文本 vue.js

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

html

vue.js