[英]Vue not passing data in component
I am not sure why the data is undefined despite passing the right property from the component.尽管从组件传递了正确的属性,但我不确定为什么数据未定义。
This is my vue component这是我的 Vue 组件
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.假设假设将 storeName 替换为数组中的名称,但我得到一个 NaN 或标题完全消失。
I received an undefined value.我收到了一个未定义的值。 Is there a reason for this?是否有一个原因?
It's working fine, just replaced storeName
with storename
and added :key
to v-for
loop:它工作正常,只需将storeName
替换为storename
并将:key
添加到v-for
循环:
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.