vue模板中未定义的属性

Question

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

这里是 child:

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

例如，我在 child 中有一个 dialogIcons 变量，它是可访问的，我可以看到 iconType 属性正在出现，它不是未定义的。但出于某种原因，当我尝试这样做时： dialogIcons[iconType]，那么它 returns 未定义。此外，如果我将 parent 中的 object 传递给此 child，我可以看到并打印 object，但我无法访问其属性。前任： itall.header 也失败了，尽管它已经存在于我刚刚传递给它的 object 中！

Answer 1

我猜你试图访问它时道具不可用因此我建议你使用计算属性

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>

vue模板中未定义的属性

Undefined attributes in vue template

vue.js

vue-component

vuetify.js