vue模板中未定义的属性

Posted 2023-02-23

【中文标题】vue模板中未定义的属性

【英文标题】：Undefined attributes in vue template

【发布时间】：2021-11-19 13:34:40

【问题描述】：

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

这是孩子：

<template>
    <v-dialog v-model="dialog" max->
    <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 道具正在运行，它不是未定义的。但是由于某种原因，当我尝试这样做时： dialogIcons[iconType]，然后返回未定义。 此外，如果我将一个对象从父级传递给这个子级，我可以看到并打印该对象，但我无法访问它的属性。 前任： itall.header 也失败了，尽管它已经存在于我刚刚传递给它的对象中！

【参考方案1】：

我猜道具在您尝试访问它时不可用，因此我建议您使用计算属性

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

然后在模板中

 getIcon 

【讨论】：

是的，我最终做了几乎相同的事情。

【参考方案2】：

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

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

【讨论】：

我明白了 :) 在计算内部处理它比在模板上处理更好

是的，我同意。我会改的