I'm attempting to create a nested component structure like this:
<prompt :users="users">
...
<dataset v-for="ds in users" :user="user"></dataset>
...
</prompt>
However, it seems that I'm encountering an issue with registering the component correctly:
[Vue warn]: Unknown custom element: <dataset> - have you properly registered the component? For recursive components, ensure the "name" option is provided.
(found in root instance)
This is how I am trying to register the component:
In app.js:
Vue.component('prompt', {
props: ['userdata', 'users'],
template: '#prompt-template',
components: {
'dataset': {
props: ['userdataset', 'user'],
template: '#dataset-template',
}
}
});
Finally, here are the templates being utilized:
<template id="dataset-template">
<li>{{ user}}</li>
</template>
<template id="prompt-template">
<transition name="modal">
<div class="modal-mask">
<div class="modal-wrapper">
<div class="modal-container">
<div class="modal-header">
<slot name="header">
default header
</slot>
</div>
<div class="modal-body">
<slot name="body">
</slot>
</div>
<div class="modal-footer">
<slot name="footer">
default footer
<button class="modal-default-button" @click="$emit('close')">
OK
</button>
</slot>
</div>
</div>
</div>
</div>
</transition>
</template>
Can someone point out any steps or details that may be missing from my implementation? It's unclear to me why the component registration isn't functioning as expected.