如何禁用vue中的按钮？答案

【问题标题】：How to disable the button in vue?如何禁用vue中的按钮？
【发布时间】：2021-10-08 10:21:30
【问题描述】：

我想使用 v-window 制作一个问题解决屏幕。我将我的问题保存在一个问题列表数组中。单击下一个按钮移动到下一个窗口。当谈到最后一个问题时，我不希望它回到开头。我为此编写了可点击并在按钮上将其绑定为禁用。但是当我这样做时，我的按钮被直接禁用了。

<v-btn @click="next" :disabled="clickable" v-model="terms">
                <v-icon x-large>mdi-arrow-right-thick</v-icon>
 </v-btn>


 
 methods: {
    next() {
      this.onboarding =
        this.onboarding + 1 === this.length ? 0 : this.onboarding + 1;
    },
  },

watch: {
    clickable: function () {
      const length = this.questionList.length;
      if (this.onboarding == length) {
        return !this.terms;
      }
      return this.terms;
    },
  },

【问题讨论】：

标签： javascript reactjs vue.js vue-component vuetify.js

【解决方案1】：

您不应该使用观察者，而是使用计算属性，因为您希望 clickable 的值能够根据更改进行响应。在 watcher 上使用 return 语句是没有意义的，并且在模板中绑定 watcher 将始终返回一个真值。

因此，计算属性是要走的路：

computed: {
    clickable: function () {
        const length = this.questionList.length;
        if (this.onboarding == length) {
            return !this.terms;
        }
        return this.terms;
    },
},

文档中有关于when to use computed property vs watch 的指南。

【讨论】：

【解决方案2】：

我认为你只需要使用计算的 as

computed: {
  clickable: function() {
    return (this.onboarding === this.questionList.length) ? true : false;
  }
}

然后您可以根据需要检查和修改。

【讨论】：