如何在 Vue.js 中显示包含其他对象的对象

Question

我是使用 Vue.js 的新手，我想知道如何显示这个 JSON 对象：

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

在具有这种结构的列表中：

<div>
<h1>The key of the object...</h1>
  <ul>
    <li>The list of all the strings inside the array</li>
  </ul>
</div>

Answer 1

试试下面的方法

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>

Answer 2

循环对象然后循环里面的数组， 这是一个工作示例

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>

Answer 3

使用 Javascripts Object.entries()，您可以将对象属性作为键值对获取，您可以循环访问。

所以，例如，如果你有你的对象

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

您可以通过编写类似这样的内容在模板中对其进行迭代

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

阅读更多https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries

Answer 4

最简单的方法是使用v-for。它与其他编程语言中的for-loop 有关。

此代码的语法如下所示：

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

根据您要显示的内容，single v-for 或 nested v-for。

注意：我已将您的 json 命名为 json，以便更好地理解。

一个 V-FOR 循环：

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

输出： {“1”：[“15-16”，“16-17”，“17-18”，“18-19”]，“2”：[“15-16”，“16-17”，“17 -18", "18-19" ] }

两个 V-FOR 循环：

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

输出： [“15-16”、“16-17”、“17-18”、“18-19”] [“15-16”、“16-17”、“17-18”、“18-19”]

三个 V-FOR 循环：

<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>

输出： 15-16 16-17 17-18 18-19 15-16 16-17 17-18 18-19

为了理解：你正在循环一个你将定义的 json 或数组，而不是你设置键（重要！）。您可以根据OUTPUT 看到我在每个循环之后编写的语法是如何工作的，并且可以自己尝试一下。

你也可以索引到你的v-for，而不是像这样写：

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

您可以参考index 上的所有内容。

希望这个答案能帮到你！

Answer 5

在 vue 模板中你可以循环一个对象：

<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>

• 你不能在组件中循环你的根标签，所以我把我的循环放在div中。
• 当你想在你的模板中循环时记得添加键。键必须具有唯一值。