Even though it may seem like a basic question, I'm having trouble figuring out how to accomplish this in VueJS
Here's the code I have 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
}
})
Here's the scenario:
- I am aware that it is not working because the config variable in the component is expecting app.config
- I prefer not to pass it as
data{ config:config }in the Vue Object. - One option could be to pass it as
, but the config will be lengthy and that is my last resort.<mycomponent :config="{'cols':4,'color':'red'}"></mycomponent> - Additionally, the config remains constant once the page loads, so there's no need to bind values dynamically.
Is there a solution for this dilemma?