CODEWITHSUNDEEP
javascriptvue.js
Aleksander Jess
Aleksander Jess

Reputation: 171

V-for doesn't output props despite correctly passing in props

I am trying to do a simple thing, which doesn't work because I don't know why.

So in parent, App.vue, component, I have 

data() {
    return {
      servers: [
        {
          id: 1,
          status: offline
        },
        {
          id: 2,
          status: offline
        },
        {
          id: 3,
          status: offline
        },
        {
          id: 4,
          status: offline
        },
        {
          id: 5,
          status: offline
        }
      ]
    };
  }

I am then passing it down to Servers.vue <servers :servers="servers"></servers>.

In Servers.vue I have simple 

<ul class="list-group">
      <li class="list-group-item" v-for="i in servers">Server</li>
</ul>

which does not output anything. Nothing at all, even though there is no error.

Yes, I am doing props: ["servers"],.

Any idea what to do?

I have been trying to solve this for quite some time now...

edit: corrected that silly typo in code, still nothing

edit 2: here's all of the code https://github.com/thenathurat/exercise-7

Upvotes: 0

Views: 37

Answers (1)

Billal BEGUERADJ
Billal BEGUERADJ

Reputation: 22804

I tested your GitHub repository, please modify the data() function of Servers.vue as follows:

data() {
    return {
      servers: [
        {
          id: 1,
          status: 'offline'
        },
        {
          id: 2,
          status: 'offline'
        },
        {
          id: 3,
          status: 'offline'
        },
        {
          id: 4,
          status: 'offline'
        },
        {
          id: 5,
          status: 'offline'
        }
      ]
    };
  },

This will make your code work and here is a screenshot of the execution program:

enter image description here

Upvotes: 1

Related Questions