I'm perplexed as to why the data is coming up as undefined even though I am passing the correct property from the component.
Here is my Vue component:
Vue.component('store-squaretile-component',{
template: '#store-squaretile-component',
props: [
'storeName'
],
data: function () {
return {}
},
});
This is the template for the component:
<script type='text/x-template' id='store-squaretile-component'>
<div class="stores-squaretile__container">
<div class="stores-squaretile__btn stores-squaretile__btn--shadow" >
<!-- background of store-squaretile to be set to img -->
<div class="dropdown">
<div class="stores-squaretile__threedots" data-bs-toggle="dropdown" >
<i class="fas fa-ellipsis-v"></i>
</div>
<ul id="dropdown-menu-store" class="dropdown-menu" >
<div class="'dropdown-item dropdown-title">Quick Actions</div>
<div class="dropdown-line"></div>
<a class="dropdown-item" href="#">Edit Store</a>
<a class="dropdown-item" href="#">Delete Store</a>
</ul>
</div>
</div>
<div class="stores-squaretile__title">{{storeName}}</div>
</div>
</script>
When I pass the following array to the component:
stores: [
{name: "harry's",},
{name: "Carl's junior",},
{name: "Mcdonald's",}
]
into this component
<store-squaretile-component
v-for="store in stores"
:storeName="store.name"
></store-squaretile-component>
It should replace the storeName with the name in the array, but instead I'm either getting NaN or the title disappears altogether.
I'm getting an undefined value. Any idea why this might be happening?