Jak zobrazit Objekt, který obsahuje jiné Objekty v Vue.js

smyčka, předmět, a pak se smyčka pole uvnitř, zde je funkční příklad

https://codesandbox.io/s/eager-leaf-nx2mq?file=/src/App.vue

<template>
  <div id="app">
    <div v-for="(value, propertyName) in data" :key="propertyName">
      <h1>The key of the {{ propertyName }}</h1>
      <ul>
        <li v-for="(item, index) in data[propertyName]" :key="index">
          {{ item }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
  data() {
    return {
      data: {
        1: ["15-16", "16-17", "17-18", "18-19"],
        2: ["15-16", "16-17", "17-18", "18-19"],
      },
    };
  },
};
</script>

Zkusit níže uvedené přístup

var app = new Vue({
 el: '#app',
 data() {
  return {
   obj:{
    "1": [
        "15-16",
        "16-17",
        "17-18",
        "18-19"
    ],
    "2": [
        "15-16",
        "16-17",
        "17-18",
        "18-19"
    ]
   }
  };
 },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h1>Iterating the list</h1>
  <ul v-for="(item, attr) in obj" :key="attr"> Item {{attr}}
   <li v-for="(val, index) in item" :key="index">{{val}}</li>
  </ul>
</div>

v vue šablony můžete procházet objekt:

<template>
  <div>
    <div v-for="(value, key) in yourObject" :key="key">
      <h1>{{ key }}</h1>
      <ul>
        <li v-for="item in value" :key="'sub' + item">{{item}}</li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: 'myComponent',
  data() {
    return {
      yourObject: {
        "1": [
          "15-16",
          "16-17",
          "17-18",
          "18-19"
        ],
        "2": [
          "15-16",
          "16-17",
          "17-18",
          "18-19"
        ]
      }
    }
  }
}
</script>
<style>
</style>

• nemůžete smyčky kořenového tagu v komponentě, tak jsem dát mé smyčky v div.
• nezapomeňte přidat tlačítko, pokud chcete smyčky v šabloně. klíč musí mít jedinečnou hodnotu.

Nejjednodušší způsob, jak je použít v-for. To je ve vztahu k for-loop v jiných programovacích jazycích.

V syntaxi pro tento kód vypadá takhle:

<div v-for="item in json" :key="item"></div>

Na základě toho, co chcete ukázat single v-for nebo nested v-for.

UPOZORNĚNÍ: pojmenoval jsem váš json json pro lepší pochopení.

ONE V-PRO SMYČCE:

<template>
  <div v-for="firstLoop in json" :key="firstLoop">
    {{firstLoop}}
  </div>
</template>

VÝSTUP: { "1": [ "15-16", "16-17", "17-18", "18-19" ], "2": [ "15-16", "16-17", "17-18", "18-19" ] }

DVA V-PRO SMYČKY:

<template>
  <div v-for="firstLoop in json" :key="firstLoop">
    <div v-for="secondLoop in firstLoop" :key="secondLoop">
      {{secondLoop}}
    </div>
  </div>
</template>

VÝSTUP: [ "15-16", "16-17", "17-18", "18-19" ] [ "15-16", "16-17", "17-18", "18-19" ]

TŘI V-PRO SMYČKY:

<template>
  <div v-for="firstLoop in json" :key="firstLoop">
    <div v-for="secondLoop in firstLoop" :key="secondLoop">
      <div v-for="thirdLoop in secondLoop" :key="thirdLoop">
        {{thirdLoop}}
      </div>
    </div>
  </div>
</template>

VÝSTUP: 15-16 16-17 17-18 18-19 15-16 16-17 17-18 18-19

Pro pochopení: Jste looping přes json nebo pole, které bude definovat, než můžete nastavit tlačítko (důležité!). Můžete vidět, na základě OUTPUT který jsem napsal po každém cyklu, jak syntaxe je pracovní a může to vyzkoušet na své vlastní.

Můžete také index, aby vaše v-for než musíš to napsat takhle:

<div v-for="(item, index) in json" :key="index">

Než můžete vytvořit odkaz na vše, co na vaší index.

Doufejme, že tato odpověď vám pomůže ven!

S Javascripty Object.entries() můžete získat objekty vlastnosti jako páry klíč-hodnota, které můžete procházet.

Tak, například, pokud máte váš objekt

const obj = {
    "1": [
        "15-16",
        "16-17",
        "17-18",
        "18-19"
    ],
    "2": [
        "15-16",
        "16-17",
        "17-18",
        "18-19"
    ]
}

Můžete iterovat přes to, že v šabloně tím, že píše něco jako toto

<div 
   v-for="(key, value) in Object.entries(obj)"
   :key="key"
>
   <h1>{{ key }}</h1>
   <ul>
      <li>{{ value }}</li>
   </ul>
</div>

Přečtěte si více na https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries