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

时间:2017-01-10 19:52:04

标签: javascript vue.js vue-component vuejs2

我将一个数组传递给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”不工作。

我该如何正确地做到这一点?

1 个答案:

答案 0 :(得分:2)

也许尝试使用json_encode()对这个值进行编码,如下所示:

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