CODEWITHSUNDEEP
vue.js
Dmitry Bubnenkov
Dmitry Bubnenkov

Reputation: 9859

How to display object key value?

I need to display key value from object. Here is my code:

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

In my template I would like to display: 2018-05-11, but not {"2018-05-11":{"may":4,"june":8,"april":5}}. How I can do it?

https://jsfiddle.net/grnok86b/

Upvotes: 3

Views: 7473

Answers (3)

Enderson Menezes
Enderson Menezes

Reputation: 479

I have created a function even to do this procedure.

HTML

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

The function in methods

JS

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

In the case I have a variable that is loaded and that variable there are indexes, 1, 2, 3 ... I get these indexes and consult in a new function to return the value by querying on another variable. If you need help, tell me by email :)

Upvotes: 0

Andrey
Andrey

Reputation: 441

You can use computed and Object.keys for return key as value.

for example:

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>

you can loop it if you want

Upvotes: 3

Vucko
Vucko

Reputation: 20834

You can always create a computed method:

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>

Upvotes: 0

Related Questions