vue.jsのコンポーネントにオブジェクトの配列を渡す

Question

Vue.js 2.2のコンポーネントにオブジェクトの配列を渡す際に問題があります。

は、ここに私のコンポーネント

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

それはブラウザで中括弧をレンダリングするとして、それは動作しませんです。
オブジェクト内に"という引用符を付けずに、というプロパティの前にコロンを付けてみました。:これらのいずれも動作しません。 しかし、私は単純な文字列を渡すだけで動作します。なぜオブジェクトが動作していないのか分かりません。
私は同様のものを見つけました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>