将数组传递给 Vue.js 2.0 中的组件答案

【问题标题】：Passing an array to a component in Vue.js 2.0将数组传递给 Vue.js 2.0 中的组件
【发布时间】：2017-05-25 10:29:44
【问题描述】：

我正在将一个数组传递给 Vue.js 中的一个组件，但它没有正确传递。字符串通过很好。我的代码如下：

Vue 代码

<template>
                <div class="panel panel-default">
                    <div class="panel-heading">{{c}}</div>

                    <div class="panel-body">

                    </div>
                </div>

</template>

<script>
import axios from 'axios';
    export default {

        mounted() {
            console.log('Component ready.');
        },

        props: ['f','c'],

        data : function() {
            return {

            }
        },

还有 HTML/PHP

<div class="container">
    <div class="row">
        <div class="col-md-12">
          <?php $a = ['Pasta', 'Chicken', 'Rice']; ?>
            <credits f= $a c="One"></credits>
        </div>
    </div>
</div>

在这种情况下，“c”可以正常工作，而“f”则不行。

我怎样才能正确地做到这一点？

【问题讨论】：

标签： javascript vue.js vue-component vuejs2

【解决方案1】：

也许尝试像这样使用json_encode()对值进行编码：

<credits f="<?= json_encode($a)?>" c="One"></credits>

【讨论】：

只是为了让其他人清楚这个问题，然后需要在组件中解析 JSON。
我不知道您使用的是哪个后端（纯 PHP？），但在 Laravel 中，您可以使用刀片传递一个道具，如下所示：