Vue沒有在組件中傳遞資料

盡管從組件傳遞了正確的屬性，但我不確定為什么資料未定義。

這是我的 Vue 組件

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

這是它的模板

<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>

當我傳遞這個陣列的組件時：

stores: [
            {name: "harry's",},
            {name: "Carl's junior",},
            {name: "Mcdonald's",}               
        ]

進入這個組件

<store-squaretile-component
    v-for="store in stores"
    :storeName="store.name"    
></store-squaretile-component> 

假設假設將 storeName 替換為陣列中的名稱，但我得到一個 NaN 或標題完全消失。

我收到了一個未定義的值。是否有一個原因？

uj5u.com熱心網友回復：

它的作業很好，只是更換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>

標籤：

上一篇：FastAPI不加載靜態檔案

下一篇：為什么一些相同的組件在反應中的作業方式不同？