CODEWITHSUNDEEP
javascripthtmlvue.jsvue-component
CPdev
CPdev

Reputation: 485

How to enable a disabled button if a condition is met in vue.js?

I have a 'submit' button that I've currently set to disabled under van-submit-bar. I need it to be enabled once the user selects a table number from the drop down options.

This is the submit button;

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

This is the select table dropdown option;

   <div v-bind:style="style"></div>
    <van-dropdown-menu direction="up">
    <van-dropdown-item v-model="value1" :options="option1" />
    </van-dropdown-menu>



option1: [
            { text: 'Select Table', value: 0 },
            { text: 'Table 1', value: 1 },
            { text: 'Table 2', value: 2 },
            { text: 'Table 3', value: 3 },

Seems like it should be an easy thing to do, but I'm having some trouble.

Thanks

Upvotes: 3

Views: 14290

Answers (3)

CPdev
CPdev

Reputation: 485

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

Upvotes: 0

Lateralus
Lateralus

Reputation: 802

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

Upvotes: 1

Bryce Howitson
Bryce Howitson

Reputation: 7690

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.

Upvotes: 11

Related Questions