Menu
I am having problem to pass an array of objects to component in Vue.js 2.2.
Here is my component
<vue-grid :fields = "[
{name: 'Person Name', isSortable: true},
{name: 'Country', isSortable: true}]"
></vue-grid>
It doesn't work as it renders the curly braces in the browser.
I've tried without the quotation " in the object and without the colon : in front of fields property. None of these work either.
However, if I just pass a simple string that works. I don't know why object is not working.
I have found a similar question but answer was given for php. I need the solution just for JavaScript. I want to hard code the object array in the component.
783
To specify the type of prop you want to use in Vue, you will use an object instead of an array. You'll use the name of the property as the key of each property, and the type as the value. If the type of the data passed does not match the prop type, Vue sends an alert (in development mode) in the console with a warning.
Using Props To Share Data From Parent To Child # VueJS props are the simplest way to share data between components. Props are custom attributes that we can give to a component. Then, in our template, we can give those attributes values and — BAM — we're passing data from a parent to a child component!
We can pass props to dynamic components using the v-bind directive. To display dynamic components, we add the component component with the is prop. currentComponent is a string with the component name. v-bind has an object with the props that we want to pass to whatever component is being rendered now.
Vue Router is the official router for Vue. js. It deeply integrates with Vue. js core to make building Single Page Applications with Vue.
You are passing it correctly. You must have something else happening behind the scenes. Ensure your template has a wrapping element. See this fiddle
<div id="vue-app">
<h2>
Vue App
</h2>
<vue-grid :fields = "[
{name: 'Person Name', isSortable: true},
{name: 'Country', isSortable: true}]"
></vue-grid>
</div>
<script id="vue-grid-template" type="text/x-template">
<div>
<h3>Grid</h3>
<div class="grid">
Fields are:
<ul>
<li v-for="field in fields">
{{field.name}} - {{field.isSortable}}
</li>
</ul>
</div>
</div>
</script>
<script>
Vue.component('vue-grid', {
props: ['fields'],
template: '#vue-grid-template'
});
new Vue({
el: '#vue-app'
});
</script>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
