在视图中显示组件属性时遇到问题

Question

我对 VueJs 很陌生，所以请原谅我的这个问题，但我很沮丧。 我有一个预先配置了 vue 路由器的应用程序和我想要正常工作的视图，但是每当我尝试显示具有属性的卡片组件时，我的网站都不会崩溃，它只会变成空白。 // 这是我的 app.vue [1]：https://i.stack.imgur.com/m7Zl3.png // 这是我的路由器索引[2] [2]：https://i.stack.imgur.com/QGlwQ.png // 这里是组件 & props ...向下查看

<template>
  <div>
    <slot>
      <b-card
        bg-variant="primary"
        text-variant="white"
        header="Primary"
        class="text-center"
      >
        <section class="header">
          <h1>{{ id }} + {{ ipAddress }}</h1>
        </section>
        <section class="body">
          <b-card-text>
            <p1> {{ inputs }} + "," + {{ outputs }}</p1>
            <p2> {{ publishers }} + "," + {{ subscribers }} </p2>
            <p3> {{ frequency }} + "," + {{ messageType }} </p3>>
          </b-card-text>
        </section>
      </b-card>
    </slot>
  </div>
</template>

<script>
// use camelCase // [ iD, ipAddress, inputs, outputs, publishers,
// subscribers, messageType, isActive, frequency]
export default {
  name: nodeCard,
  props: {
    iD: {
      type: Number,
      required: true,
    },
    ipAddress: {
      type: Number,
      required: true,
      // validator: function (value) {
      //   return value.length >= 8 || value.length <= 12;
      // },
    },
    inputs: {
      type: String,
      required: false,
      default: none,
    },
    outputs: {
      type: String,
      required: false,
      default: none,
    },
    publishers: {
      type: Object,
      required: false,
      default: none,
    },
    subscribers: {
      type: Object,
      required: false,
      default: none,
    },
    messageType: {
      type: Object,
      required: true,
    },
    isActive: {
      type: Boolean,
      required: false,
      default: none,
    },
    frequency: {
      type: String,
      required: false,
      default: none,
    },
  },
  data() {},
};
</script>


here is the view page 
<template>
  <div id="card">
    <b-card-group deck>
      <nodeCard
        v-for="topics in NNV"
        :key="topics.iD"
        :name="topics.ipAddress"
        :inputs="topics.inputs"
        :outputs="topics.outputs"
        :publishers="topics.publishers"
        :subscribers="topics.subscribers"
        :frequency="topics.frequency"
        :messageType="topics.messageType"
      >
      </nodeCard>
    </b-card-group>
  </div>
</template>

<script>
import nodeCard from "../components/NodeCard.vue";

export default {
  name: NNV,
  components: nodeCard,
  data() {
    return {
      topics: [
        {
          iD: 123,
          ipAddress: 1234,
          inputs: "Core Vue basics you have to know",
          outputs: "Vue",
          publishers: "polog",
          subscribers: "Migos",
          frequency: "offset",
          messageType: "quavo",
        },
      ],
    };
  },
};
</script>

Answer 1

由于你是 Vuejs 新手，所以很容易犯这样的错误，所以不用担心。

用下面的代码替换您的代码，并尝试了解导致问题的原因，都与拼写错误以及变量和字符串之间的区别有关。 例如-

• 组件的名称是一个字符串，我们不应该写它没有单或双逗号，如下-

导出默认 { name: "component_name" }

不是

导出默认{名称：组件名称}

• 无论何时导入任何组件，都这样写-

  组件：{component_name}

不是

components:component_name

• 传递 props 时，两边使用相同的名称，即如果 prop 键为“iD”，则在另一个组件中将仅作为 iD 使用，而不是“id”

正确的代码是-

查看页面-

   <template>
    <div id="card">
        <b-card-group deck>
            <nodeCard
                v-for="(topic, index) in topics"
                :key="index"
                :id="topic.iD"
                :ipAddress="topic.ipAddress"
                :inputs="topic.inputs"
                :outputs="topic.outputs"
                :publishers="topic.publishers"
                :subscribers="topic.subscribers"
                :frequency="topic.frequency"
                :messageType="topic.messageType"
            >
            </nodeCard>
        </b-card-group>
    </div>
</template>

<script>
import nodeCard from "@/components/NodeCard.vue";

export default {
    name: "NNV",
    components: { nodeCard },
    data() {
        return {
            topics: [
                {
                    iD: 123,
                    ipAddress: 1234,
                    inputs: "Core Vue basics you have to know",
                    outputs: "Vue",
                    publishers: "polog",
                    subscribers: "Migos",
                    frequency: "offset",
                    messageType: "quavo",
                },
            ],
        };
    },
};
</script>

NodeCard.vue-

<template>
    <div>
        <slot>
            <b-card
                bg-variant="primary"
                text-variant="white"
                header="Primary"
                class="text-center"
            >
                <section class="header">
                    <h1>{{ id }} + {{ ipAddress }}</h1>
                </section>
                <section class="body">
                    <b-card-text>
                        <p1> {{ inputs }} + "," + {{ outputs }}</p1>
                        <p2> {{ publishers }} + "," + {{ subscribers }} </p2>
                        <p3> {{ frequency }} + "," + {{ messageType }} </p3>>
                    </b-card-text>
                </section>
            </b-card>
        </slot>
    </div>
</template>

<script>
// use camelCase // [ iD, ipAddress, inputs, outputs, publishers,
// subscribers, messageType, isActive, frequency]
export default {
    name: "NodeCard",
    props: {
        id: {
            type: Number,
            required: true,
        },
        ipAddress: {
            type: Number,
            required: true,
            // validator: function (value) {
            //   return value.length >= 8 || value.length <= 12;
            // },
        },
        inputs: {
            type: String,
            default: null,
        },
        outputs: {
            type: String,
            default: null,
        },
        publishers: {
            type: String,
            default: null,
        },
        subscribers: {
            type: String,
            default: null,
        },
        messageType: {
            type: String,
            required: true,
        },
        isActive: {
            type: Boolean,
            default: null,
        },
        frequency: {
            type: String,
            default: null,
        },
    },
};
</script>