將對象數組傳遞給vue.js中的組件

Question

我在將對象數組傳遞給Vue.js 2.2中的組件時遇到問題。

這是我的組件

<vue-grid :fields = "[
  {name: 'Person Name', isSortable: true}, 
  {name: 'Country', isSortable: true}]"
></vue-grid>

它無法在瀏覽器中呈現花括號，因此無法使用。
我嘗試過在對象中不加引號" ，在fields屬性前也沒有冒號: 。這些都不起作用。但是，如果我只是傳遞一個簡單的有效字符串，我不知道為什么對象不起作用。
我發現了一個類似的問題，但針對php給出了答案。 我只需要JavaScript的解決方案。 我想對組件中的對象數組進行硬編碼。

Answer 1

您正確傳遞了它。 您必須在幕后發生其他事情。 確保您的模板具有包裝元素。 看到這個小提琴

<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>