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,"april":5}}。我该怎么做？

https://jsfiddle.net/grnok86b/

标签： vue.js

Answer 1

您可以使用计算和 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>

如果你愿意，你可以循环它