Vue Array prop 默认值不起作用

Posted 2023-02-23

【中文标题】Vue Array prop 默认值不起作用

【英文标题】：Vue Array prop default value doesn't work

【发布时间】：2021-04-24 15:04:30

【问题描述】：

我在下面的Vue 2 - How to set default type of array in props做同样的事情

Vue.component("Test-Attribute", 
    props: 
        attributes: 
            type: Array,
            required: false,
            // Object or array defaults must be returned from
            // a factory function
            default: function () 
                return [
                    attributeName: 'One', multiselect: 0,
                    attributeName: 'Two', multiselect: 1,
                    attributeName: 'Three', multiselect: 0,
                    attributeName: 'Four', multiselect: 1,
                ]
            
        
    ,
    template: `
      <div>
      <component
          v-for="(attribute,index) in attributes"
          :key="index"
          :name="attribute.attributeName"
          :is="getAttributeType(attribute)"
      >
         attribute.attributeName + ':' 
      </component>
      </div>
    `,
    created() 
        console.log(this.attributes)
    ,
    methods: 
        getAttributeType: function (attribute) 
            return parseInt(attribute.multiselect) === 1 ? 'MultiAttribute' : 'SingleAttribute'
        
    

);

用完整的组件代码更新了原始问题，我传递了一个组件按预期呈现的道具

【问题讨论】：

检查这个codesandbox.io/s/agitated-cloud-1dfix?file=/src/App.vue，它的工作。你可能有不同的问题。

【参考方案1】：

语法没问题，我传了一个空数组，props只有在值为null或未定义时才使用默认值。