[Vuejs]-How to enable a disabled button if a condition is met in vue.js?

by

4👍

✅

You can utilize Vue’s reactivity to do this pretty easily. Without seeing your code all I can provide is a common approach.

In your template

<select v-model="selectData">...</select>
<button :disabled="!selectData">Action</button>

Then in your script

data () {
    return {
      selectData: null,
    }
  },

This will cause the value to start out empty and when the select list is changed the v-model will update and enable the button.

👤Bryce Howitson

1👍

You can toggle the element’s disabled property like this:

  • Boolean – :disabled="true" or "disabled="false"
  • Variable – :disabled="yourVariable"
  • Function – :disabled="yourFunc(arg)"

Your code will end up looking like this:

<van-submit-bar
      :price="toPrice(basketTotalPrice)"
      :disabled="yourVariable" // <-- You can use a variable or call a function must be a boolean value
      label="Total:"
      currency="£"
      button-text="Submit"
      :loading="isLoading"
      @submit="onSubmit"
    >
👤Lateralus

0👍

I managed to get it working by adding;

<van-submit-bar
  :price="toPrice(basketTotalPrice)"
  label="Total:"
  currency="£"
  button-text="Submit"
  :loading="isLoading"
  **:disabled="!selectedTable"**
  @submit="onSubmit"
>

and adding selectedTable: 0, to my data() section

👤CPdev

Leave a comment