無法在 Vue 組件中使用道具 object

Question

嘗試遍歷下面 object 中的“列表”，它按預期傳遞給組件，但無法訪問“procs”。

過程：

{
    "all": 282,
    "running": 0,
    "blocked": 0,
    "sleeping": 0,
    "unknown": 282,
    "list": [
        {
            "name": "System Idle Process",
            "pcpu": 82.46913580246914,
            "pmem": 0.0000478612597801493,
        },
        {
            "name": "System",
            "pcpu": 1.728395061728395,
            "pcpus": 1.728395061728395,
            "pmem": 0.006269825031199559,
        },
...

VUE 組件：

<template>
  <div>
    <div class="nes-table-responsive">
      <table class="nes-table is-bordered is-centered">
        <thead>
          <tr>
            <th>NAME</th>
            <th>CPU</th>
            <th>MEM</th>
          </tr>
        </thead>
        <tbody>
          <div v-for="proc in sortByName" :key="proc.name">
            <tr>
              <td>{{ proc.name }}</td>
              <td>{{ proc.pcpu }}</td>
              <td>{{ proc.pmem }}</td>
            </tr>
          </div>
        </tbody>
      </table>
    </div>

<!-- For testing: -->
<p>{{ procs }}</p> 

  </div>
</template>

<script>
export default {
  name: "PROC",
  prop: ["procs"],
  computed: {
    sortByName() {
      if (typeof this.procs === "undefined") return;

      return this.procs.list;
    },
  },
};
</script>

Vue調試控制台：

Chrome 控制台錯誤：[Vue 警告]：屬性或方法“procs”未在實例上定義，但在渲染期間被引用。

我嘗試在 data() object 中定義它，但這不起作用。 有什么建議嗎？

Answer 1

想通了... prop: ["procs"]應該是props: ["procs"]