V-for 只显示两个 JSON 对象之一答案

【问题标题】：V-for only showing one of two JSON ObjectsV-for 只显示两个 JSON 对象之一
【发布时间】：2021-05-28 05:44:57
【问题描述】：

我正在做一个 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 也不行！
加入这两个 obj 怎么办？！

【问题讨论】：

您可以concat 两个数组，或者使用扩展运算符：[...arrayA, ...arrayB]（总是尝试将问题分解为小部分：这与 v-for 或 Vue 或 JSON 无关，它是关于连接两个数组；找到最简单的问题，你会发现很多现有的答案）

标签： javascript arrays json vue.js

【解决方案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>

【讨论】：