How to disable the button in vue?

Question

I want to make a question solving screen using v-window. I keep my questions in a questionlist array. Clicking on the next button moves to the next window. I don't want it to go back to the beginning when it comes to the last question. I wrote clickable for this and bind it with disabled on the button. But when i do this, my button is disabled directly.

<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;
    },
  },

Tony Tin Nguyen · Accepted Answer · 2021-08-03 10:58:37Z

1

I think you just need to use a computed as

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

Then you can check and modification as your needs.

answered Aug 3, 2021 at 10:58

Tony Tin Nguyen

3753 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tony19 · Accepted Answer · 2022-07-16 02:21:02Z

1

You shouldn't be using a watcher, but a computed property instead, because you want the value of clickable to be reactive based on changes. It does not make sense to have return statements on the watcher, and binding a watcher in your template will always return a truthy value.

Therefore, computed property is the way to go:

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

The documentation has a guide on when to use computed property vs watch.

edited Jul 16, 2022 at 2:21

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Aug 3, 2021 at 7:50

Terry

66.7k16 gold badges107 silver badges127 bronze badges

Collectives™ on Stack Overflow

How to disable the button in vue?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related