无效属性：预期的数组，但未定义

Posted 2023-02-23

【中文标题】无效属性：预期的数组，但未定义

【英文标题】：Invalid Property: expected Array, but got undefined

【发布时间】：2020-03-27 08:48:35

【问题描述】：

我有一个Vue组件Shoes，它使用组件Product，它使用组件Product。我正在使用组件产品的 API 获取一个数组，它用信息填充组件产品。

当我尝试从 Shoes 组件中的 API 获取数组时，一切顺利，当我尝试将数组提供给 Products 组件（需要数组）时，Vue 表示未定义。什么...

“鞋子”组件：

<!-- eslint-disable-next-line -->

<template>
  <div>
    <app-products :new_products="new_products" :old_products="old_products"></app-products>
  </div>
</template>

<script>
    import getData from "../data/get_data";
    // importing API function
    export default 
        data() 
            return 

            
        ,
        methods: 
            async getShoes () 

                const response = await getData('products', 'shoes');

                const new_products = [],
                    old_products = [];

                for (const product of response.data)
                    product.tag === 'new' ? new_products.push(product) : old_products.push(product);

                console.log(this.products.new, this.products.old);

                this.new_products = new_products;
                this.old_products = old_products;

                console.log(this.products.new, this.products.old);
            
        ,
        async mounted() 
            await this.getShoes()
        
    

</script>

<style>

</style>

---

产品组件：

<template>
   <div>
     <div class="wrap wrap_for_new" v-if="new_products.length !== 0">
       <h1 class="write" >Эти товары поступили <b class="red">недавно!</b></h1>
       <div class="main_wrap">
         <app-product v-for="(product, key) of new_products"  class="new_product" :key="key" :name="product.name" :descriptions="product.description" :price="product.price" :ImageId="product.id" :count="product.count"></app-product>
       </div>
     </div>
     <div class="wrap" v-if="old_products.length !== 0">
       <div class="main_wrap">
         <app-product v-for="(product, key) of old_products" :key="key" :name="product.name" :descriptions="product.description" :price="product.price" :ImageId="product.id" :count="product.count"></app-product>
       </div>
     </div>
   </div>
</template>

<script>
    export default 
        props: 
            new_products: 
                type: Array,
                required: true
            ,
            old_products: 
                type: Array,
                required: true
            
        ,
        methods: 
            setGridColumns() 
                let ret_ = '';

                for (let i = 0; i < Math.round(window.innerWidth / 170); i++) 
                    ret_ += '1fr ';
                

                for (let el of document.querySelectorAll('.main_wrap')) el.style.gridTemplateColumns = ret_;
            ,
        ,
        async beforeCreate() 

            console.log(this.new_products, this.old_products);

            this.setGridColumns();
        
    
</script>

<style>

  .wrap_for_new 
    margin-top: 50px;
  

  .wrap 
    border-bottom: 1px solid red;
  

.main_wrap 
  position: relative;
  display: grid;
  height: 100%;
  grid-template-rows: 1fr;
  grid-gap: 5px;


  .new_product 
    border: red solid 1px !important;
  

  .write 
    text-align: center;
    font-size: 150%;
  

  .red 
    color: red;
  

  .write span 
    color: red;
  
</style>

---

产品组件：

<template>
<!--  :class=" classObject "-->
    <div class="product" >
<!--       name  -  descriptions  -  price  -  ImageId -->

      <div class="look" @click="look">
        Просмотреть
      </div>

      <img :src="`localhost:8000/image/$ImageId`" class="image_still"  :/>

      <div class="product_name">  name  </div>

      <div class="descriptions">descriptions | toolongtext</div>

      <div class="price"> price </div>

      <div class="count"> count items </div>

    </div>

</template>
<script>
    import  animate  from '../staticFunctions/animate';
    import emitter from "../../src/main";

    export default 
        props: 
            name: String,
            descriptions: String,
            price: String,
            ImageId: String,
            count: Number
        ,
        methods: 
          look() 
              emitter.$emit('look', 
                  name: this.name,
                  descriptions: this.descriptions,
                  price: this.price,
                  ImageId: this.ImageId,
                  count: this.count
              );
              animate('product-look', false);
              this.isOpened = !this.isOpened;
          
        ,
        filters: 
            toolongtext: value => value.length > 51 ? value.slice(0, 51) + '...' : value
        
    
</script>

<style scoped>
  .product 
      height: 400px;
    width: 90%;
    background-color: #fafafa;
    box-shadow: 0 0 5px gray;
    margin: 10px;
    border-radius: 10px;
    float: left;
    max-width: 90vw;
    max-height: 90vw;
    display: grid;
    grid-template-rows: 0.5fr 4fr 1fr 2fr 1fr;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "look look"
      "img img"
      "name name"
      "desc desc"
      "prc count";
  
  .look 
    opacity: 0;
    width: 100%;
    text-align: center;
    grid-area: look;
    transition: opacity 1s;
  

  .product:hover .look,
  .product:active .look 
    opacity: 0.6;
  

  .product * 
    text-align: center;
  

  .descriptions 
    grid-area: desc;
  

  .image_still 
    grid-area: img;
  

  .product_name 
    grid-area: name;
  

  .price 
    grid-area: prc;
  

  .count 
    grid-area: count;
  



</style>

【参考方案1】：

您永远不会在 Shoes 组件中的 data 下定义 new_products 或 old_products：

data() 
    return 

    
,

相反，您只需分配给他们：

this.new_products = new_products;
this.old_products = old_products;

但它们不是被动的，所以它们是undefined。定义它们：

data() 
    return 
        new_products: [],
        old_products: []
    
,

此外，您必须遵循属性命名约定，lowerCamcelCase 或 kebab-case，但绝不是 snake_case。

例如：

:new-products="new_products"

代替：

:new_products="new_products"