如何用v-for有条件地呈现选项和optgroup？

Question

我有一个这样的数据结构

const options = [
    {
        group: 'Fruits', options: [
            { label: 'Apple', value: 'f-1' },
            { label: 'Banana', value: 'f-2' },
            { label: 'Orange', value: 'f-3' },
        ],
    },
    { label: 'Chocolate', value: 'm-1' },
    { label: 'Cake', value: 'm-2' },
    {
        group: 'Vegetables', options: [
            { label: 'Cabbage', value: 'v-1' },
            { label: 'Tomato', value: 'v-2' },
        ],
    },
    { label: 'Puddin', value: 'm-3' },
]

我想将它呈现为如下所示的select组件：

<select>
    <optgroup label="Fruits">
        <option value="f-1">Apple</option>
        <option value="f-2">Banana</option>
        <option value="f-3">Orange</option>
    </optgroup>
    <option value="m-1">Chocolate</option>
    <option value="m-2">Cake</option>
    <optgroup label="Vegetables">
        <option value="v-1">Cabbage</option>
        <option value="v-2">Tomato</option>
    </optgroup>
    <option value="m-3">Pudding</option>
</select>

我尝试过这样的方法，但它给了我一个错误：

<select>
    <optgroup v-for="group in options" v-if="group.group" :label="group.group" :key="group.group">
        <option v-for="option in group" :key="option.value" :value="option.value">{{ option.label }}</option>
    </optgroup>
    <option v-for="option in options" v-if="!option.group" :key="option.value" :value="option.value">{{ option.label }}</option>
</select>

'v-for‘指令中的'options’变量应该替换为一个计算属性，该属性返回过滤后的数组。你不能把“v-for”和“v-if”混在一起。

我该如何正确地呈现它，有什么想法吗？我为这件事挣扎了一段时间，谢谢！

Answer 1

这就是non-rendering