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/

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>

您可以根据需要循环播放

Answer 2

您始终可以创建一个computed方法：

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

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <p>{{ foo }}</p>
</div>

Answer 3

我甚至创建了一个函数来执行此过程。

HTML

<p v-for="entidade in relato.entidade">${acessaEntidade(entidade)}</p>

方法中的功能

JS

acessaEntidade: function (id) {
            return this.entidades['nome' + id]
        },

如果我有一个已加载的变量，并且该变量有索引1、2、3 ...，我得到这些索引，并在新函数中进行查询以通过查询另一个变量来返回值。如果您需要帮助，请通过电子邮件告诉我：）

如何显示对象键值？

3 个答案: