V-for即使正确传递了道具也不会输出道具

Question

我正在尝试做一件简单的事情，因为我不知道为什么，这是行不通的。

所以在父App.vue组件中，我有

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

然后我将其传递给Servers.vue <servers :servers="servers"></servers>。

在Servers.vue中，我有一个简单的

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

不输出任何内容。完全没有，即使没有错误。

是的，我在做props: ["servers"],。

任何想法该怎么办？

我已经尝试解决这个问题了很长时间了...

编辑：更正了代码中的愚蠢拼写错误

编辑2：这是所有代码https://github.com/thenathurat/exercise-7

Answer 1

我已经测试了您的GitHub存储库，请如下修改 Servers.vue 的data()功能：

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

这将使您的代码正常工作，这是执行程序的屏幕截图：