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

【问题标题】：passing array of objects to a component in vue.js将对象数组传递给 vue.js 中的组件
【发布时间】：2017-09-04 02:12:49
【问题描述】：

我在 Vue.js 2.2 中将对象数组传递给组件时遇到问题。

这是我的组件

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

它不起作用，因为它在浏览器中呈现花括号。
我试过在对象中没有引号"，在fields 属性前面没有冒号:。这些都不起作用。但是，如果我只传递一个有效的简单字符串。我不知道为什么对象不起作用。
我找到了一个类似的question，但给出了 php 的答案。我只需要 JavaScript 的解决方案。我想对组件中的对象数组进行硬编码。

【问题讨论】：

标签： javascript vuejs2 vue-component

【解决方案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>

【讨论】：