根据值限制 v-select 条目

Question

我有一个 v 表单，当单击数据 table 中的记录时，它会打开。表单显示记录的信息，我有一个 v-select 显示预订状态选项，当前状态为 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>

在我的数据中，我有描述的选项。

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

我希望只显示等于或高于当前 bookingStatus 值的选项。例如：

如果记录的预订状态为 1，我希望 v-select 下拉列表中显示“待处理”、“已确认 - 未付款”、“已确认 - 已付款”

如果记录的 bookingStatus 为 2，我只想在下拉列表中显示“已确认 - 未付款”、“已确认 - 已付款”。

如果记录的预订状态为 3，我只想在下拉列表中显示“已确认 - 已付款”。

这可能吗？

Answer 1

您可以像这样在 :items 上应用 filter：

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

根据值限制 v-select 条目

Limiting v-select entries based on value

vue.js

v-select