vue模板中未定义的属性

Question

我有一个组件，它是一个简单的通用对话框。它有其独特的属性来定义图标数据，我将在从其父节点接收某些信息时显示这些图标数据。问题是，我通过父类通过props传递数据，我可以看到数据，但在某些情况下，数据只是未定义。

这是孩子:

<template>
<v-dialog v-model="dialog" max-width="290">
<v-card>
<v-card-title class="text-h5">
{{ headerText }}
</v-card-title>
<v-card-text>
<v-icon aria-hidden="false">
<!-- {{ `mdi-${iconAttrs.name}`}}
{{ iconAttrs.iconName }} -->
</v-icon>
{{ itall }}
{{ `${itall.header}-tudo` }}
{{ `${dialogIcons[iconType]}-one of the icons` }}
{{ `${iconType}- only the icontype`}}

{{ bodyText }}
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="blue darken-1" text @click="dialog = false">
{{ btnCloseText }}
</v-btn>
<v-btn color="blue darken-1" text @click="dialogCallsParent" v-if="hideBtn">
{{ btnConfirmText }}
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
<script>
export default {
name: 'confirmdialog',
props: ['itall', 'headerText', 'bodyText', 'btnCloseText', 'btnConfirmText', 'hideBtn', 'iconType'],
data () {
return {
dialog: false,
dialogIcons: {
reactivate: {
name: 'account-reactivate',
color: 'green',
size: 'x-large',
},
delete: {
name: 'account-remove',
color: 'red',
size: 'x-large',
},
blocked: {
name: 'account-off',
color: 'red',
size: 'x-large',
}
},
selectedIcon:'',
parentData: {}
}
},
methods: {
dialogCallsParent(){
this.$emit('confirmDialogClicked', this.parentData)
this.close()
},
openBinding(v = {}){
this.dialog = true
this.parentData = v
},
open(){
this.dialog = true
},
close(){
this.dialog = false
}
}
}
</script>

例如，我有dialogIcons变量里面的子是可访问的，我可以看到iconType prop到来，它不是未定义的。但出于某种原因，当我尝试做:dialogIcons[iconType]，则返回undefined。此外，如果我将一个对象从父对象传递给子对象，我可以看到并打印这个对象，但我不能访问它的属性。例:itall.header也失败了，尽管它已经存在于我刚刚传递给它的对象中!

Answer 1

我猜你试图访问它的时候道具是不可用的因此我建议你使用computed property

computed: {
getIcon() {
if(this.iconType !== undefined || this.iconType !== null || this.iconType !== '') return this.dialogIcons[this.iconType]
return '';
}
}

，然后在模板

{{ getIcon }}

Answer 2

在尝试访问它之前，我最终验证了道具是否有效。

<v-icon aria-hidden="false" :color="iconType ? dialogIcons[iconType].color : ''" size="70">
{{ iconType ? `mdi-${dialogIcons[iconType].name}` : ''}}
</v-icon>