javascript - 尽管正确传递了 props，V-for 仍不输出 props

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'
        }
      ]
    };
  },

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