8

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.

1 Answer 1

14

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>
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.