Statically passing arrays to a Vue component

Question

I need to statically pass an array to my Vue component, called ajax-table. I can't seem to find a way to do it, so I came up with this:

<ajax-table
    header-names="Code, Name, Description, Type"
    field-names="code, name, description, major_type">
</ajax-table>

Inside the component, I do this:

export default {

    props: [
        'headerNames',
        'fieldNames'
    ],

    data: function () {

        return {
            columnHeaders: [],
            columnFields: []
        }
    },

    created() {
        this.columnHeaders = this.headerNames.split(",").map(x => x.trim());
        this.columnFields = this.fieldNames.split(",").map(x => x.trim());
    }
}

Now, columnHeaders and columnFields contain the header-names and field-names that I passed statically to the component.

My question: Is there a better way to do this?

akuiper · Accepted Answer · 2017-12-28 20:12:42Z

2

You should be able to directly pass the array to props using v-bind: directive or : for short:

<ajax-table
    :header-names="['Code', 'Name', 'Description', 'Type']"
    :field-names="['code', 'name', 'description', 'major_type']">
</ajax-table>

Now props headerNames and fieldNames are arrays, which you can use in the component.

answered Dec 28, 2017 at 20:12

akuiper

216k33 gold badges363 silver badges380 bronze badges

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

3 Comments

Code Poet Over a year ago

It works! So, the array expression in double quotes is only evaluated if I use v-bind and not if I pass it statically?

akuiper Over a year ago

Yep. When using v-bind, the value passed in is evaluated as javascript object, so you can pass arrays or other valid javascript object. Without it, it's simple html, so the value is considered as a string.

Code Poet Over a year ago

Brilliant! Thanks.

Collectives™ on Stack Overflow

Statically passing arrays to a Vue component

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related