Vue not passing data in component

Question

I am not sure why the data is undefined despite passing the right property from the component.

This is my vue component

Vue.component('store-squaretile-component',{
    template: '#store-squaretile-component',
    props: [
        'storeName'                 
    ],
    data: function () {
        return {}
    },
});

This is its template

<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 component this array:

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 is suppose to suppose to replace the storeName with the name in the array but instead I get a NaN or the title disappears entirely.

I received an undefined value. Is there a reason for this?

Answer 1

It's working fine, just replaced storeName with storename and added :key to v-for loop:

 Vue.component('store-squaretile-component', { template: '#store-squaretile-component', props: ['storename'], }) new Vue({ el: '#demo', data() { return { stores: [ {name: "harry's", }, {name: "Carl's junior",}, {name: "Mcdonald's",} ] } } }) Vue.config.productionTip = false Vue.config.devtools = false

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="demo"> <store-squaretile-component v-for="(store, idx) in stores":storename="store.name":key="idx" ></store-squaretile-component> </div> <script type='text/x-template' id='store-squaretile-component'> <div class="stores-squaretile__container"> <div class="stores-squaretile__btn stores-squaretile__btn--shadow" > <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>