Having trouble displaying component properties in view - vuejs2

Question

I am quite new to VueJs so forgive me for this question but I am very frustrated.
I have an app pre-configured with vue router and the views I want working fine, but whenever I try to display a card component with properties my site doesnt crash it just goes blank.
// here is my app.vue
[1]: https://i.stack.imgur.com/m7Zl3.png
// here is my router index[2]
[2]: https://i.stack.imgur.com/QGlwQ.png
// here is the component & props ...view farther down
<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

As you are new to Vuejs so it is obvious to make such mistakes, so don't worry.
Replace your code with the below one and try to understand that which things were causing the issue, all were related to spelling mistakes and the difference between variable and String.
For example-
component's name is a String, we should not write it without the single or double comma, like below-
export default { name: "component_name" }
not
export default { name: component_name }
Whenever import any component, write it like this-
components: {component_name}
not
components:component_name
When pass props, use the same name on both sides, i.e if the prop key is "iD", it will be used in another component as iD only, not "id"
Correct code is-
View page-
<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>