vue.js - 如何显示对象键值？

Question

我需要显示对象的键值。这是我的代码:

new Vue({
  el: '#app',
  data: {
    x: {"2018-05-11":{"may":4,"june":8,"april":5}}
  }
})

在我的模板中，我想显示:2018-05-11，但不是 {"2018-05-11":{"may":4,"june": 8,"四月":5}}。我该怎么做？

https://jsfiddle.net/grnok86b/

Answer 1

您可以使用 computed 和 Object.keys 将键作为值返回。

例如:

new Vue({
  el: '#app',
  
  data: {
    x: {
      "2018-05-11": {
        "may": 4,
        "june": 8,
        "april": 5
      }
    }
  },
  computed: {
    date() {
      return Object.keys(this.x)[0];
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
  <p>My date is {{date}}</p>
</div>

你可以循环播放