CODEWITHSUNDEEP
javascriptstringobjectvue.jsvue-component
3x071c
3x071c

Reputation: 1016

Object passed as prop in vue arrives as string

https://jsfiddle.net/2xwo87bs/
For Vue to process the object prop I pass to the component, I'll have to convert the string to an object first (in the snippet I've took the easy way out and used JSON.parse() ). Is there a way I can pass a real javascript object as a prop directly to the component, without it being interpreted as a string? Note I'll use the component multiple times, which makes an individual data() object to pass into the prop, which is then used in the component for the v-bind, for each use impractical

Upvotes: 1

Views: 3447

Answers (1)

Steve Holgado
Steve Holgado

Reputation: 12071

When you pass a prop like this:

<component ok='{"data-x":1}'></component>

...you are actually passing the string '{"data-x":1}' as the prop value.

You need to use binding to evaluate the prop value:

<component v-bind:ok='{"data-x":1}'></component>

...or use the shorthand version:

<component :ok='{"data-x":1}'></component>

This way, it's the object {"data-x":1} that gets passed as the prop value.

Upvotes: 3

Related Questions