Vue: Pass Objects/Arrays as props for custom component?

[gmhenderson]

Is there some way to make this work?

Vue.component('my-select', {
    template: '<select options="options"></select>',
    props: ['options']
})

Then on my page use:

<my-select options="[{text: 'Cats', value: 'cats'}]"></my-select>

More generally, is there some way to pass object/arrays to a custom component directly from the view?

[yyx990803]

try options="{{ [{text: 'Cats', value: 'cats'}] }}"

[gmhenderson]

Perfect, thank you.

[mattbit]

I ran into the same problem and the {{ }} trick doesn't solve when using version 1.0.0. I managed to get it working with :options="[{text: 'Cats'}]".
Is this the right way to do it?

[animabear]

The same as @mattbit when using vue1.0.8

[simplesmiler]

@mattbit @animabear curly braces are not supported for props since 1.0.0.
Thus :options="[{text: 'Cats'}]" is the idiomatic way to do this.

[animabear]

@simplesmiler I see, thanks

change log: https://github.com/vuejs/vue/releases

[vedmant]

You can also use single quotes for attribute, :items='[{text: "Cats"}]' if you generate json on backend, it uses double quotes by default.

[HelgeSverre]

In case anyone finds this issue from google searching for the same thing in Vue 2.0 and figures out that interpolation in props has been removed like I did, here is the proper way to do this is to simply do <custom-element v-bind:whatever="['test','test2']"></custom-element> or <custom-element :whatever="['test','test2']"></custom-element>.

[Roeefl]

@HelgeSverre Thanks! <3

[nd9600]

If you try to bind an array as variable, you might need to do

<custom-element v-bind:whatever="[...array]"></custom-element>

or

<custom-element :whatever="[...array]"></custom-element>

which uses ES2015's spread syntax.

[danawesome]

Thank you @nd9600. This was just what I needed to get my errors to go away. The funny thing was, it was still handing the array into the vars without data problems, just the warning.

[MatheusRamos90]

I had the same problem... removed our friends {{ }} and baang! It worked.

[fradrick]

@nd9600 thnak you for your solution. Worked for me!!