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

Question

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

Answer 1

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: