首页 文章

在vue中嵌套数组循环?

提问于
浏览
0

我将如何使用v-for循环下面的JSON对象?我想循环所有ID / Numbers,以及每个数字中的所有项目,并将它们全部显示在列表中......我知道我可以使用_1210023轻松循环所有system_events但是如何循环所有不同的ID / Numbers,以及所有里面的物品?

我的JSON看起来像:

{
    "system_events": {
        "1013": [{
                "id": 25899,
                "timestamp": "2017-08-15T21:26:42Z",
                "type": "alarm",
                "code": 190,
                "title": "",
                "description": "",
                "appeared": "2017-08-15T21:26:40Z",
                "disappeared": null,
                "acknowlegded": null,
                "solved": null,
                "system_name": "Randers pr 44b sidste station"
            }, {
                "id": 26157,
                "timestamp": "2017-08-15T21:32:17Z",
                "type": "alarm",
                "code": 190,
                "title": "",
                "description": "",
                "appeared": "2017-08-15T21:32:06Z",
                "disappeared": null,
                "acknowlegded": null,
                "solved": null,
                "system_name": "Randers pr 44b sidste station"
            }
        ],
        "1015": [{
                "id": 23777,
                "timestamp": "2017-08-15T20:38:08Z",
                "type": "alarm",
                "code": 191,
                "title": "",
                "description": "",
                "appeared": "2017-08-15T20:38:00Z",
                "disappeared": null,
                "acknowlegded": null,
                "solved": null,
                "system_name": "Favrskov Svenstrup gyvelvej"
            }, {
                "id": 23779,
                "timestamp": "2017-08-15T20:38:08Z",
                "type": "alarm",
                "code": 190,
                "title": "",
                "description": "",
                "appeared": "2017-08-15T20:37:58Z",
                "disappeared": null,
                "acknowlegded": null,
                "solved": null,
                "system_name": "Favrskov Svenstrup gyvelvej"
            }
        ]
    }
}

2 回答

  • 0

    除了Bert 's answer, I' ll之外,你还可以使用 template 标签来不渲染主框架 . 例如,如果您只想要子项目的干净HTML ul>li ,这很有用 .

    const vue = new Vue({
      el: "#app",
      data: {
        system_events: {"1013":[{"id":25899},{"id":26157}],"1015":[{"id":23777},{"id":23779}]}
      }
    });
    
    <script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>
    
    <div id="app">
      <ul>
        <template v-for="item in system_events">
          <li v-for="event in item">{{ event.id }}</li>
        </template>
      </ul>
    </div>
    
  • 0

    另一种方法是使用计算属性来简化数据结构:

    new Vue({
      el: '#app',
      data: {
        system_events: {"1013":[{"id":25899},{"id":26157}],"1015":[{"id":23777},{"id":23779}]}    
      },
      computed: {
        allEvents: function() {
          return Object.values(this.system_events)
            .reduce((a, b) => a.concat(b), [])
        }
      }
    })
    

    这允许您在模板中使用一个简单的循环,这使得标记的结构更清晰:

    <script src="https://unpkg.com/vue"></script>
    
    <div id="app">
      <ul>
        <li v-for="event in allEvents">{{event.id}}</li>
      </ul>
    </div>
    

    如果您正在处理大型数据集,和/或数据经常发生变异,您可能希望测试这两种方法的性能 . 我不知道哪一个会更好 .

    JSFiddle:https://jsfiddle.net/em33av7j/

相关问题