Question

195

passing array of objects to a component in vue.js

rated 0 times [ 200] [ 5] / answers: 1 / hits: 28880 / 7 Years ago, sat, april 8, 2017, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

morganm

Add To Favorites

Follow

Total Points: 626

Total Questions: 95

Total Answers: 95

Location: South Sudan

Member since Sun, Jul 11, 2021

3 Years ago

answered 7 Years ago blaisep · Accepted Answer

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>