将对象数组传递给vue.js中的组件

Question

我有问题需要将对象数组传递给Vue.js 2.2中的组件。

这里是我的组件

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

，因为它呈现在浏览器中的大括号它不工作。
我已经尝试了"的对象，并且在fields之前没有冒号:属性。这些都没有工作。 但是，如果我只是传递一个简单的字符串，工作。我不知道为什么对象不工作。
我发现了一个类似的question，但答案是给出了PHP。我只需要JavaScript的解决方案。我想在组件中硬编码对象数组。

Answer 1

您正确传递它。你必须在幕后发生其他事情。确保你的模板有一个包装元素。 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>