Vue.js access value of key

Question

Trying to access the value of the key with Vue.js which is new for me. I want to use the key as the id and access the title with key.title or something similar if possible. Here is the code I am trying:

HTML

  <ul id="all">
    <li v-for="(song,key) in songs" :class="{ active: song.isActive }" v-bind:id="key">
      {{ key.title }} //Hound Dog
    </li>
  </ul>

Javascript

var vm = new Vue({
  el: '#all',
  data: {
    songs: [
      a:{
        title:'Hound Dog',
        lyrics:'You aint nothing but a hound dog, crying all the time',
        isActive: true 
      },
      b:{
        title:'Long Gone',
        lyrics:'I am long gone today',
        isActive: false
      } 
    ]    
  }
})

songs is not a valid javascript object. Does it really have a: and b: in it? Either you want an object with a and b as properties or an array of song objects. — Bert
– Bert, Commented Jul 21, 2017 at 15:38
Is there an example you could share? I think my goal is pretty clear but I am not as JS savvy as I'd like to be — Shawn Cooke
– Shawn Cooke, Commented Jul 21, 2017 at 15:40

Bert · Accepted Answer · 2017-07-21 15:46:31Z

1

As I mentioned in comments, your songs object is not a valid javascript object. I converted it into an array for the purposes of this example. What you call a key in this case is just the index of the item in the array and it is just a number, it doesn't have any properties.

var vm = new Vue({
  el: '#all',
  data: {
    songs: [
      {
        title:'Hound Dog',
        lyrics:'You aint nothing but a hound dog, crying all the time',
        isActive: true 
      },
      {
        title:'Long Gone',
        lyrics:'I am long gone today',
        isActive: false
      } 
    ]    
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
  <ul id="all">
    <li v-for="(song, index) in songs" :class="{ active: song.isActive }" v-bind:id="index">
      {{ song.title }} 
    </li>
  </ul>

In this second example, I converted songs into an object.

var vm = new Vue({
  el: '#all',
  data: {
    songs: {
      a: {
        title: 'Hound Dog',
        lyrics: 'You aint nothing but a hound dog, crying all the time',
        isActive: true
      },
      b: {
        title: 'Long Gone',
        lyrics: 'I am long gone today',
        isActive: false
      }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<ul id="all">
  <li v-for="(song, key) in songs" :class="{ active: song.isActive }" v-bind:id="key">
    {{ song.title }} 
  </li>
</ul>

edited Jul 21, 2017 at 15:46

answered Jul 21, 2017 at 15:42

Bert

82.6k17 gold badges205 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Shawn Cooke Over a year ago

Each song has an id. How would I select a song by id to modify, say the title?

Bert Over a year ago

@TripleC Is it part of the data structure or is the id what you were calling a, b?

Shawn Cooke Over a year ago

The id is what I was calling a or b.

Bert Over a year ago

@TripleC Added the second example. Basically instead of [ a:{...}], it should be {a:{...}}.

Collectives™ on Stack Overflow

Vue.js access value of key

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related