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.

• By default the select table is the first option in the drop down, so that's why I have the submit button disabled.

• Once the user has chosen a table, the user will be able to select the 'submit' button. I've pasted what the option list looks like below.

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

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.

• By default the select table is the first option in the drop down, so that's why I have the submit button disabled.

• Once the user has chosen a table, the user will be able to select the 'submit' button. I've pasted what the option list looks like below.

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

• javascript
• html
• vue.js
• vue-ponent

• Please create a minimal example. – akuiper Commented Jul 15, 2021 at 16:07
• Can you add your vue code? – Bryce Howitson Commented Jul 15, 2021 at 16:10
• Added to the original post – CPdev Commented Jul 15, 2021 at 22:21

3 Answers 3

You can utilize Vue's reactivity to do this pretty easily. Without seeing your code all I can provide is a mon 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.

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

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