Component not rendering nor providing an error - vue.js

Question

I have a table in a component, which I render into another component however, when I render the component inside of another component, it is not appearing, and due to the complete lack of errors I can't even proceed. I've checked how I've imported etc and it seems correct. But perhaps someone can spot something I haven't. I'm very new to VueJs so apologies for the untrimmed code, I'm not 100% on what could be relevant yet.
File I'm Importing Into.vue
<template>
<div>
<b-table
:striped="striped"
:bordered="false"
:data="participants"
detailed
class="participant-table"
:row-class="() => 'participant-row'"
>
<InternalTable></InternalTable>
<b-table-column field="columnValue" v-slot="props2" class="attr-column">
<b-table
:bordered="false"
class="attr-table"
:striped="true"
:data="props2.row.columnValues"
>
<b-table-column field="columnName" v-slot="itemProps">
<SelectableAttribute
:attr-name="props2.row.fieldClass"
:attr-id="itemProps.row.id"
:model-id="itemProps.row.id"
model-name="NewParticipant"
>
{{ itemProps.row.value }}
</SelectableAttribute>
</b-table-column>
</b-table>
</b-table-column>
</b-table>
</div>
</template>
<script>
import { snakeCase } from "snake-case";
import InternalTable from './InternalTable'
import SelectableAttribute from '../groups/SelectableAttribute'
export default {
props: {
bordered: true,
striped: true,
participants: [
{
primaryAlias: '',
primaryEmail: '',
primaryAddress: '',
primaryPhone: '',
}
]
},
},
components: {
SelectableAttribute,
InternalTable
},
methods: {
tableDataToDataValueCells(participant) {
const fields = [
{ fieldName: 'companyNames', fieldClass: 'CompanyName' },
{ fieldName: 'aliases', fieldClass: 'Alias' },
{ fieldName: 'addresses', fieldClass: 'Address' },
{ fieldName: 'phones', fieldClass: 'Phone' },
{ fieldName: 'emails', fieldClass: 'Email' },
{ fieldName: 'birthdates', fieldClass: 'Birthdate' },
{ fieldName: 'customerNumbers', fieldClass: 'CustomerNumber' },
{ fieldName: 'ibans', fieldClass: 'BankAccount' },
];
let result = [];
fields.forEach(field => {
if (participant[field.fieldName].length > 0) {
result.push({
attributeName: field.fieldName,
columnName: I18n.t(`ccenter.participant.table.${snakeCase(field.fieldName)}`),
columnValues: participant[field.fieldName],
fieldClass: field.fieldClass,
})
}
});
return result;
}
}
}
</script>
<style>
.table tbody tr.detail:last-child td {
border-width: 1px !important;
}
.participant-table .participant-row td {
word-break: break-word;
font-size: 13px;
padding: 10px 5px;
}
.cell-action {
padding-left: 0px !important;
padding-right: 0px !important;
}
.cell-action .b-radio {
margin: 0px;
}
.attr-table table thead {
display: none;
}
.attr-table table td {
border: none;
}
.attrs-detail-container table tr td:nth-child(2) {
padding: 0 !important;
}
.attrs-detail-container table thead {
display: none;
}
</style>
InternalTable.Vue
<template>
<b-table :data="participants" detailed class="participant-table" :row-class="() => 'participant-row'">
<b-table-column field="primaryAlias" :label="t('participant.table.primary_alias')" v-slot="props">
<template v-if="props.row.primaryAlias">{{ props.row.primaryAlias.value }}</template>
<template v-else>-</template>
</b-table-column>
<b-table-column field="primaryEmail" :label="t('participant.table.primary_email')" v-slot="props">
<template v-if="props.row.primaryEmail">{{ props.row.primaryEmail.value }}</template>
<template v-else>-</template>
</b-table-column>
<b-table-column field="primaryAddress" :label="t('participant.table.primary_address')" v-slot="props">
<template v-if="props.row.primaryAddress">{{ props.row.primaryAddress.value }}</template>
<template v-else>-</template>
</b-table-column>
<b-table-column field="primaryPhone" :label="t('participant.table.primary_phone')" v-slot="props">
<template v-if="props.row.primaryPhone">{{ props.row.primaryPhone.value }}</template>
<template v-else>-</template>
</b-table-column>
<b-table-column v-slot="props" cell-class="cell-action">
<slot v-bind="props.row">
</slot>
</b-table-column>
<template slot="detail" slot-scope="props">
<b-table class="attrs-detail-container" :data="tableDataToDataValueCells(props.row)" cell-class="with-bottom-border">
<b-table-column field="columnName" v-slot="props">
<b>{{ props.row.columnName }}</b>
</b-table-column>
</b-table>
</template>
</b-table>
</template>
<script>
import { snakeCase } from "snake-case"
export default {
props: {
participants: {
type: Array,
}
},
methods: {
tableDataToDataValueCells(participant) {
const fields = [
{ fieldName: 'companyNames', fieldClass: 'CompanyName' },
{ fieldName: 'aliases', fieldClass: 'Alias' },
{ fieldName: 'addresses', fieldClass: 'Address' },
{ fieldName: 'phones', fieldClass: 'Phone' },
{ fieldName: 'emails', fieldClass: 'Email' },
{ fieldName: 'birthdates', fieldClass: 'Birthdate' },
{ fieldName: 'customerNumbers', fieldClass: 'CustomerNumber' },
{ fieldName: 'ibans', fieldClass: 'BankAccount' },
];
let result = [];
fields.forEach(field => {
if (participant[field.fieldName].length > 0) {
result.push({
attributeName: field.fieldName,
columnName: I18n.t(`ccenter.participant.table.${snakeCase(field.fieldName)}`),
columnValues: participant[field.fieldName],
fieldClass: field.fieldClass,
})
}
});
return result;
}
}
};
</script>
<style scoped>
.table tbody tr.detail:last-child td {
border-width: 1px !important;
}
.participant-table .participant-row td {
word-break: break-word;
font-size: 13px;
padding: 10px 5px;
}
.cell-action {
padding-left: 0px !important;
padding-right: 0px !important;
}
.cell-action .b-radio {
margin: 0px;
}
.attr-table table thead {
display: none;
}
.attr-table table td {
border: none;
}
.attrs-detail-container table tr td:nth-child(2) {
padding: 0 !important;
}
.attrs-detail-container table thead {
display: none;
}
</style>

Answer 1

What I see is that you trying to use props in your InternalTable.vue, which you used like this:
props: {
participants: {
type: Array,
}
}
In your Into.vue, you just call your component without providing these props. You should change:
<InternalTable></InternalTable>
to
<InternalTable :participants="participants"></InternalTable>
Looks like your b-table isn´t rendering because you didn´t provide data.
EDIT: Your data needs to be filled first
Currently, your array participants is empty, it just consists of:
participants: {
type: Array,
default: null,
}
In your InternalTable.vue you refer to primaryAlias, primaryEmail, primaryAddress and primaryPhone at your b-table-column´s. This data isn´t provided yet, thats why the table renders without data. You need to provide an array with a minimum structure of:
participants: [
{
primaryAlias: '',
primaryEmail: '',
primaryAddress: '',
primaryPhone: ''
}
]