I have a component that is a simple generalized dialog. It has its unique attributes defining the icon data I will show when receiving certain informations from its parent. The thing is, I am passing the data through the parent via props and I can see the data, but under certain situations the data is just undefined.

Here is the 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>

For example, I have the dialogIcons variable inside the child which is accessible, and I can see the iconType prop comming, it's not undefined. But for some reason when I try doing: dialogIcons[iconType], then it returns undefined. Furthermore, if I pass a object from the parent to this child, I can see and print the object, but I can't access its attributes. Ex: itall.header also fails despite it already exists inside the object I just passed to it!

CodePudding user response：

I guess the props is not available the time you are trying to access it hence I suggest you to use computed property

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

and then in the template

{{ getIcon }}

CodePudding user response：

I ended up verifying if the prop was valid before trying to access it.

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