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>