How to pass a javascript object to component in VueJS?

Question

The question may sound basic, but I am unable to figure out how to do it in VueJS

I have the following in html

<script>
 var config = {'cols':4,'color':'red'}
</script>

<div id="app">
   <mycomponent :config="config"></mycomponent>
</div>

var app = new Vue({
   el: '#app',
   data: {
      // config: config // I do not want to pass this
   }
})

Following is the use case:

I know this isn't working because config variable in the component is looking for app.config
I do not want to pass it as data{ config:config } in the Vue Object.
I can pass it as <mycomponent :config="{'cols':4,'color':'red'}"></mycomponent> but the config is going to be very long and this would be my last option.
And yes, this config does not change once the page loads, so I do not need to bind values.

Is there a way to do this?

++, I did this defining some global my_componentname_config() function which gets then invoked within the "created" hook. But its not a neat solution ... — Nicolas Heimann
– Nicolas Heimann, Commented May 30, 2017 at 16:20
Passing as a object string to component would be better, also the constraint is that i use this component in multiple places in my app, all I do is change the config. The config gets generated in backend and is passed along with HTML. — Masade
– Masade, Commented May 30, 2017 at 16:23
Make a plugin as described here: stackoverflow.com/a/43193455/7636961 at the bottom. — Egor Stambakio
– Egor Stambakio, Commented May 30, 2017 at 16:52

Roy J · Accepted Answer · 2017-07-07 18:34:26Z

5

You can add a global member to Vue itself. Update: As Osuwariboy noted in the comments, for some reason Vue is not aware of itself by name in the un-minified version of Vue. It requires creating a Vue data item, which I have done below.

var app = new Vue({
   el: '#app',
   data: {
      Vue
   },
   components: {
      myComponent: {
        template: '<div>{{config}}</div>',
        props: ['config']
      }
   }
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.min.js"></script>
<script>
 Vue.$config = {'cols':4,'color':'red'}
</script>

<div id="app">
   <my-component :config="Vue.$config"></my-component>
</div>

edited Jul 7, 2017 at 18:34

answered May 30, 2017 at 17:06

Roy J

44k10 gold badges84 silver badges106 bronze badges

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

7 Comments

Masade Over a year ago

This works well for me! Can you please help me understand why javascript objects defined outside are not accessible inside app?

Roy J Over a year ago

If it were a global variable, it would be accessible, but declared with var, it's not global. Rather than wide-open global, I recommend attaching it to the Vue global.

Osuwariboy Over a year ago

@RoyJ I can't get your solution to work no matter how hard I try. Could you take a look at my fiddle here and tell me what I'm doing wrong?

Roy J Over a year ago

@Osuwariboy It works if you use the cloudflare cdn of Vue. You can use the 2.3.4 version on cloudflare and it works; the unpkg.com cdn is supposedly 2.3.4, too, but it doesn't work. I cannot explain that.

Roy J Over a year ago

@Osuwariboy You can add a data for Vue, defining it using the global Vue, and yours works. jsfiddle.net/8xt8ye4g/5

|

Collectives™ on Stack Overflow

How to pass a javascript object to component in VueJS?

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related