无法在 Vue 组件中使用 prop 对象答案

【问题标题】：Unable to use prop object in Vue component无法在 Vue 组件中使用 prop 对象
【发布时间】：2020-11-15 15:05:07
【问题描述】：

尝试遍历以下对象中的“列表”，它正在按预期传递给组件，但无法访问“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() 对象中定义它，但这不起作用。有什么建议吗？

【问题讨论】：

prop: ["procs"] 应该是 props: ["procs"]（即 props）

标签： javascript vue.js

【解决方案1】：

想通了...prop: ["procs"] 应该是props: ["procs"]

【讨论】：