javascript - 尽管正确传递了道具，但 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

标签： javascriptvue.js

Answer 1

我测试了你的 GitHub 仓库，请修改Servers.vuedata()的功能如下：

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

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