Vue Array prop default value doesn't work

Question

I do the same as in the following 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'
        }
    }

});

Updated the original question with the full component code, I I pass down a prop the component is rendered as expected

check this codesandbox.io/s/agitated-cloud-1dfix?file=/src/App.vue, its working. you may have a different problem. — Ashwin Bande
– Ashwin Bande, Commented Jan 20, 2021 at 9:21

Gabor · Accepted Answer · 2021-01-28 06:21:34Z

1

The syntax is OK, I passed down an empty array and props default value is used only if the value is null or undefined.

answered Jan 28, 2021 at 6:21

Gabor

1553 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue Array prop default value doesn't work

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related