V-for只显示两个JSON对象中的一个

Question

我正在做一个v-for传递两个JSON对象，但我不能在屏幕上显示所有的值，在我的情况下，只有第一个对象被调用。
我的JSON数据是本地的外部。JSON文件，不通过API获取。

<b-card-body v-for="municipio in municipios.centro_oeste.rio_vermelho,municipios.centro_oeste.:key="index">
<b-card-text>{{ municipio.title }}</b-card-text>
</b-card-body>  
Using (obj1,obj2) in v-for only shows obj1...  

JSON:

{
"centro_oeste": {
"rio_vermelho": [
{"title": "Goiás"},
{"title": "Araguapaz"},
{"title": "Aruanã"},
{"title": "Britânia"},
{"title": "Faina"},
{"title": "Guaraita"},
{"title": "Heitoraí"},
{"title": "Itaberaí"},
{"title": "Itapirapuã"},
{ "title": "Itapuranga"},
{ "title": "Jussara"},
{ "title": "Matrinchã"},
{ "title": "Mossâmedes"},
{ "title": "Mozarlãndia"},
{ "title": "Nova Crixas"},
{ "title": "St° Fé de Goiás"}
],
"oeste_1": [
{"title": "Amorinópolis"},
{"title": "Aragarças"},
{"title": "Arenópolis"},
{"title": "Baliza"},
{"title": "Bom Jardim de Goiás"},
{"title": "Diorama"},
{"title": "Fazenda Nova"},
{"title": "Iporá"},
{"title": "Israelândia"},
{ "title": "Ivolãndia"},
{ "title": "Jaupaci"},
{ "title": "Moiporá"},
{ "title": "Montes Claros de Goiás"},
{ "title": "Piranhas"}
]
} 

obj1+obj不起作用!
我该怎么做才能把这两个任务连接起来?

Answer 1

首先，您需要在使用index之前定义它。可以使用spread operator连接两个列表。computed属性将使它更有组织:

new Vue({
el:"#app",
data: () => ({
municipios: {
"centro_oeste": {
"rio_vermelho": [ {"title": "Goiás"}, {"title": "Araguapaz"} ],
"oeste_1": [ {"title": "Amorinópolis"}, {"title": "Aragarças"} ]
}  
} 
}),
computed: {
centro_oeste_list: function() {
return [...this.municipios.centro_oeste.rio_vermelho, ...this.municipios.centro_oeste.oeste_1];
}
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div
v-for="(municipio, index) in centro_oeste_list"
:key="index"
>
<p>{{ municipio.title }}</p>
</div>  
</div>