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

我有这样的数据结构

常量选项=[ { 组：“水果”，选项：[ {标签：'Apple'，值：'f-1'}， {标签：'Banana'，值：'f-2'}， {标签：'Orange'，值：'f-3'}， ], }, {标签：'Chocolate'，值：'m-1'}， {标签：'Cake'，值：'m-2'}， { 组：“蔬菜”，选项：[ {标签：'colla'，值：'v-1'}， {标签：'番茄'，值：'v-2'}， ], }, {标签：'Puddin'，值：'m-3'}， ] 我希望将其渲染为如下所示的选择组件：

苹果 香蕉 橙色 巧克力 糕饼 甘蓝 番茄 布丁 我尝试了类似的方法，但它给了我一个错误：

{{option.label} {{option.label} “v-for”指令中的“options”变量应替换为返回筛选数组的computed属性。你不应该把“v-for”和“v-if”混在一起

关于我应该如何正确渲染它有什么想法吗？我有点纠结于此，提前谢谢

这正是这个方法派上用场的地方

const options=[{组：水果，选项：[{标签：苹果，值：f-1}，{标签：香蕉，值：f-2}，{标签：橙色，值：f-3}]}，{标签：巧克力，值：m-1}，{标签：蛋糕，值：m-2}，{组：蔬菜，选项：[标签：卷心菜，值：v-1}，{标签：番茄，值：v-2}，{标签：普丁，值：m-3}] 新Vue{ el:应用程序， 数据：=>{options，selected:null} } {{opt.label}} {{option.label}

---

使用一个计算属性，比如说，optionsgroups，它过滤具有group属性的选项，并在v-for中使用该属性，而不是在optonsgroups中使用该属性，即v-for=group，在optonsgroups中，如果现在需要，则不使用v-if，顺序可能错了then@JaromandaX我也考虑过使用computed属性，但混合使用分组和非分组选项似乎是不可能的哇，我甚至不知道vue中有一个无渲染元素，我希望有类似于reactjs的东西。非常感谢你！