Javascript 如何在Vue select中使用foreach？

如何在选择框中使用Vue循环使类别和子类别选项如下所示：

+新闻
-运动
-国际
+博客

我可以用PHP这样做：

   @foreach($categories as $category)
    <option value="{{$category->id}}">{{$category->name}}</option>
    @foreach($category->subcategory as $sub)
        <option value="{{$sub->id}}">-{{$sub->name}}</option>
    @endforeach 
@endforeach 

@foreach（$categories作为$category）
{{$category->name}
@foreach（$category->subcategory作为$sub）
-{{$sub->name}
@endforeach
@endforeach

**我想在Vue组件中使用它**

试试这个。 Js:

HTML:

---

在vuejs中创建嵌套种子选择器非常简单

//初始化vue实例
var app=新的Vue({
el:“#应用程序”，
//在使用Laravel的情况下，初始化数据
//例如，这里是你需要重新尝试的地方
//所有类别包括：
//数据：{{Category:：with（['subcategories']）->get（）}
数据：{
所选类别：空，
所选子类别：空，
消息：“你好，Vue！”，
类别：[
{
名称:"新闻",，
子类别：[
{
名称：“运动”
},
{
名称：“国际”
}
]
},
{
名称：'博客'，
子类别：[
{
名称：“博客子类别示例”
},
{
名称：“另一个博客子类别示例”
}
]
}
]
}
})

已选择类别：{{categorySelected？categorySelected.name:null}}

已选择子类别：{{Subcategory selected？Subcategory selected.name:null}}

{{subcategory.name}

Ok！，是的，我的例子有点不同，我编辑了snipet，我想现在正是你需要的

let vm = new Vue({
    el: "#app",
    data: {
        integer: [{
            id: 1,
            name: 'odd',
            numbers: [{id: 1, name: 'one'}, {id: 3, name: 'three'}]
        }, {
            id: 2,
            name: 'even',
            numbers: [{id: 2, name: 'two'}, {id: 4, name: 'four'}]
        }],
    },
});

<option v-for="item in integer" :value="item.id" v-text="item.name"></option>
    <option v-for="num in item.numbers" :value="num.id" v-text="num.name"></option>