CODEWITHSUNDEEP
htmlvue.js
Emilly Monteiro de Souza
Emilly Monteiro de Souza

Reputation: 115

How can I acess my data child from v-if in vue?

I'm trying to acess another variable from a for in vue, but I can't acess this...

<div class="list-group" v-for="index in max_slots">
    <div v-if="user[index].firstname">
        <a href="#">{{user[index].firstname}} {{user[index].lastname}}</a>
    </div>
    <div v-else>
        <a href="#">Empty Slot</a>
    </div>   
</div>

and the data is like that:

data(){
        return{
            max_slots: 5,
            user: [
                {
                    firstname: 'Max',
                    lastname: 'Trox'
                },
                {
                    firstname: 'Alexandra',
                    lastname: 'Rhae'
                }
            ]
        }
    },

It's always show me 'Empty Slot' or not even load the page

Upvotes: 0

Views: 52

Answers (2)

Ihsan Fajar Ramadhan
Ihsan Fajar Ramadhan

Reputation: 1033

My solution is by adding condition in v-if to read if the data user[index] is not undefined, here I how would do it:

<div class="list-group" v-for="index in max_slots">
    <div v-if="user[index-1]">
        <a href="#">{{user[index-1].firstname}} {{user[index-1].lastname}}</a>
    </div>
    <div v-else>
        <a href="#">Empty Slot</a>
    </div>   
</div>

I changed v-if="user[index].firstname" to v-if="user[index-1]". The logic behind this is that it will render the item in user when they are not undefined. Also, you have to substract the index by -1 because v-for="index in max_slots" will count from 1, 2, ...max_slots and not fom 0 while array count start from 0, or it makes the first data in user to be ignored.

new Vue({
  el: '#app',
  data() {
    return {
      max_slots: 5,
      user: [{
          firstname: 'Max',
          lastname: 'Trox'
        },
        {
          firstname: 'Alexandra',
          lastname: 'Rhae'
        }
      ]
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="list-group" v-for="index in max_slots">
    <div v-if="user[index-1]">
      <a href="#">{{user[index-1].firstname}} {{user[index-1].lastname}}</a>
    </div>
    <div v-else>
      <a href="#">Empty Slot</a>
    </div>
  </div>
</div>

Upvotes: 1

akuiper
akuiper

Reputation: 214927

The v-if condition is throwing an error when index is out of bound for users. Changing it to user[index] or v-if="index < user.length" should work.

new Vue({
  el: '#app',
  data () {
    return {
      max_slots: 5,
      user: [
        {
          firstname: 'Max',
          lastname: 'Trox'
        },
        {
          firstname: 'Alexandra',
          lastname: 'Rhae'
        }
      ]
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id='app'>
  <div class="list-group" v-for="index in max_slots">
    <div v-if="user[index]">
      <a href="#">{{user[index].firstname}} {{user[index].lastname}}</a>
    </div>
    <div v-else>
      <a href="#">Empty Slot</a>
    </div>   
  </div>
</div>

Upvotes: 0

Related Questions