Displaying only a single JSON object when using V-for

Question

Displaying only a single JSON object when using V-for

I'm currently facing an issue with my v-for loop, where I am passing two JSON objects but only the values from the first object are being displayed on the screen. My JSON data is stored locally in an external .json file and is not fetched through an 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 doesn't work as well!
What should I do to concatenate these two objects?

javascript arrays json vue.js

Answer 1

Answer №1

To start, it is important to establish the index before utilizing it in your code. Utilizing the spread operator can help combine two lists seamlessly. Incorporating a computed property will enhance the organization of your code:

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>

Answer 2

To start, it is important to establish the index before utilizing it in your code. Utilizing the spread operator can help combine two lists seamlessly. Incorporating a computed property will enhance the organization of your code:

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>

Displaying only a single JSON object when using V-for

Answer №1

Similar questions

Tips for preloading a small placeholder image before the main content is loaded

Angular Code Splitting with Webpack

ESLint Issue: Every item in a list must be assigned a distinct "key" property

Is there a more efficient method for examining each multidimensional array?

Creating an import map using jspm2 can be done by following these steps

Undefined value retained in $scope variable despite being assigned

transferring information between pages in nextjs

What is the best way to add randomness to the background colors of mapped elements?

Managing information from various selection fields

Generate a new entry for a singular piece of data within an array

Identify the invalid field within an Angular form

What causes an error when bootstrap.js is loaded twice?

Using Javascript to dynamically add variables to a form submission process

Language for describing JSON data structures

Could someone provide some clarification on this callback related to node.js?

When can JavaScript objects hold up and when do they meet their demise?

Is there a way to retrieve a formatted address from a JSON decode output?

Convert Parse.com data into a JSON string format and then reverse the process

Responsive Tabs with Material-UI

A versatile jQuery function for extracting values from a :input selector