Limiting v-select entries based on value

Question

I have a v-form that opens when a record in a data table is clicked. The form displays the record's information and I have a v-select that shows the booking status options with the current status selected.

<v-form ref="BookingForm" lazy-validation>
    <v-container>
    <v-row>
        <v-col>
        <v-select
            v-model="editedItem.bookingStatus"
            :items="BookingStatus"
            item-text="text"
            item-value="id"
            label="Status"
            :rules="selectRule"
        />
        </v-col>
    </v-row>
    <v-divider />
    <v-row>
        
        ... other information

    </v-row>
    </v-container>
</v-form>

In my data I have the options described.

BookingStatus: [
    { id: 1, text: 'Pending' },
    {
        id: 2,
        text: 'Confirmed - unpaid',
    },               {
        id: 3,
        text: 'Confirmed - paid',
    },
],

What I would like is to only show options equal to or higher than the current bookingStatus value. For example:

If a record has a bookingStatus of 1 I would like "Pending", "Confirmed - unpaid", "Confirmed - paid" in the v-select dropdown

If a record has a bookingStatus of 2 I would like only "Confirmed - unpaid", "Confirmed - paid" in the dropdown.

If a record has a bookingStatus of 3 I would like only "Confirmed - paid" in the dropdown.

Is this possible?

Answer 1

You can apply a filter on your :items like this:

<v-select v-model="editedItem.bookingStatus"
    :items="BookingStatus.filter(status => status.id >= editedItem.bookingStatus)"
    item-text="text"
    item-value="id"
    label="Status"
    :rules="selectRule"
    />