Hi Guys,
I have the following data:
hotlines: [
{
id: '1',
description: 'Description',
directories: [
{
id: '1',
contactno: '001',
},
{
id: '2',
contactno: '002',
}
],
socialmedias: [
{
id: '1',
socmed: 'facebook',
},
{
id: '2',
socmed: 'twitter',
}
]
}
]
`
I process the record I wanted by using this script based on the id forwarded.
<script>
export default {
data: function () {
var hotlineId = this.$route.params.id;
var currentHotline;
var currentDirectories;
var currentSocialMedias;
this.$root.hotlines.forEach(function (hotline) {
if (hotline.id === hotlineId) {
currentHotline = hotline;
currentDirectories = currentHotline.directories;
currentSocialMedias = currentHotline.socialmedias;
}
});
return {
hotline: currentHotline,
directories: currentDirectories,
socialmedias: currentSocialMedias
};
}
};
</script>
With the code below, I was able to display the description of the hotlines. But I wasn’t able to display the data of directories and social media. Please guide me with this concern. TIA.
<div class="block block-strong">
{{hotline.description}}
</p>
<p class="row">
<div class="list links-list">
<ul>
{{#each directories}}
<li><a href="#" class="col button button-fill">{{directories.contactno}}</a></li>
{{/each}}
</ul>
</div>
</p>
<p class="row">
<div class="list links-list">
<ul>
{{#each socialmedias}}
<li><a href="#" class="col button button-fill">{{socialmedias.socmed}}</a></li>
{{/each}}
</ul>
</div>
</p>
</div>
Do I need to import something because there is an error with the following:
Uncaught (in promise) Error: TypeError: Cannot read property ‘contactno’ of undefined at eval (component-loader.js:50)