在 vue 模板中获取“无法读取未定义的属性‘键’”

Question

所以在我的 vue 中，我有一个方法可以获取一些数据，创建数组并将它们传递给另一个 vue 文件以在模板中呈现。

方法

        this.shoesData.titles = ['Date', 'Model', 'Price Qty', 'Order Qty', 'Discount Qty'];
        this.shoesData.values = [ 
          new Date(this.getShoes.insertDate).toISOString().slice(0, 10).toString(),
          this.getShoes.model,
          parseFloat(this.getShoes.price).toFixed(0).toString()+' tn', 
          parseFloat(this.getShoes.order).toFixed(0).toString()+' tn',
          parseFloat(this.getShoes.discount).toFixed(0).toString()+' tn'
        ]; 

然后我将shoesData 传递给另一个文件以在其模板中使用它

<CardMultiValue v-if="shoesData.values"  :cardData="shoesData"  />   

在CardMultiValue我有，

<template>
<v-card style="width:100%;height:100%;" :flat="flat" >          
    <v-card-title class="title" v-if="cardData.Title" style="width:100%;height:30px;justify-content:center;align-items:center;padding:5px;">{{cardData.Title}}</v-card-title>
    <v-card-actions  v-if="cardData.Title" style='width:100%;height:calc(100% - 30px);padding:5px;' >
        <v-container style="padding:0px;height:100%;">                     
            <v-row style="height:100%;">
                <v-col :cols="8">
                    <div v-for="title in cardData.titles" :key="title" :style="'display:flex;align-items:center;font-size:18px;font-weight:bold;height:'+rowHeight+'%;'">
                        {{title}}
                    </div>
                </v-col> 
                <v-col :cols="4">                        
                    <div v-for="value in cardData.values" :key="value" :style="'display:flex;align-items:center;font-size:18px;height:'+rowHeight+'%;'">
                        {{value}}
                    </div>
                </v-col>  
            </v-row>   
        </v-container>
    </v-card-actions> 
    <v-card-actions  v-else style='width:100%;height:100%;padding:5px;' > 
        <v-container style="padding:0px;height:100%;">                     
            <v-row style="height:100%;">
                <v-col :cols="8">
                    <div v-for="a in cardData.titles" :key="a" :style="'display:flex;align-items:center;font-size:18px;font-weight:bold;height:'+rowHeight+'%;'">
                        {{a}}
                    </div>
                </v-col> 
                <v-col :cols="4">
                    <div v-for="b in cardData.values" :key="b" :style="'display:flex;align-items:center;font-size:18px;height:'+rowHeight+'%;'">
                        {{b}}
                    </div>
                </v-col>  
            </v-row>   
        </v-container>
    </v-card-actions>
</v-card>

这并不复杂，但是，如果 this.getShoes.order 和 this.getShoes.discount 都恰好是 0 ，我得到 ​​p>

TypeError: Cannot read property 'key' of undefined
    at sameVnode (vue.runtime.esm.js?2b0e:5811)
    at updateChildren (vue.runtime.esm.js?2b0e:6213)
    at patchVnode (vue.runtime.esm.js?2b0e:6313)
    at updateChildren (vue.runtime.esm.js?2b0e:6187)
    at patchVnode (vue.runtime.esm.js?2b0e:6313)
    at updateChildren (vue.runtime.esm.js?2b0e:6187)
    at patchVnode (vue.runtime.esm.js?2b0e:6313)
    at updateChildren (vue.runtime.esm.js?2b0e:6187)
    at patchVnode (vue.runtime.esm.js?2b0e:6313)
    at updateChildren (vue.runtime.esm.js?2b0e:6187)

这一定是模板错误，因为如果我完全删除 this.getShoes.order 或 this.getShoes.discount 我不会收到错误。另外，如果我不将数据传递给CardMultiValue，我不会出错。

我该如何解决这个问题？谢谢

Answer 1

this.getshoes 听起来像是一个方法名。因此，也许将其更改为 this.getShoes().price 或将适当的参数（如果有）传递给它； this.getShoes(someParameter).price