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.

• 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

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.