Übergeben Array von Objekten an eine Komponente in vue.js

Question

Ich habe ein Problem, ein Array von Objekten an die Komponente in Vue.js 2.2 übergeben.

Hier ist meine Komponente

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

Es funktioniert nicht, wie es die geschweiften Klammern im Browser rendert.
Ich habe versucht, ohne das Zitat " im Objekt und ohne den Doppelpunkt : vor fields Eigentum. Nichts davon funktioniert auch. Allerdings, wenn ich nur eine einfache Zeichenfolge übergeben, die funktioniert. Ich weiß nicht, warum das Objekt nicht funktioniert.
Ich habe eine ähnliche question gefunden, aber die Antwort wurde für PHP gegeben. Ich brauche die Lösung nur für JavaScript. Ich möchte das Objekt-Array in der Komponente fest codieren.

Answer 1

Sie übergeben es richtig. Sie müssen etwas anderes hinter den Kulissen passieren. Stellen Sie sicher, dass Ihre Vorlage über ein Umbruchelement verfügt. 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>