Passing an array to a component in Vue.js 2.0

Question

I am passing an array to a component in Vue.js but it is not passing properly. Strings pass fine. My code is below:

Vue code

<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 {

            }
        },

And the 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>

In this case "c" works fine and "f" doesn't.

How can I do this properly?

Matthias Weiß · Accepted Answer · 2017-01-10 20:39:43Z

3

Maybe try to encode the value using json_encode()like this:

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

answered Jan 10, 2017 at 20:39

Matthias Weiß

5081 gold badge7 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

James Parsons Over a year ago

Just to make it clear to anyone else with this problem, the JSON then needs to be parsed in the component.

Matthias Weiß Over a year ago

I don't know which backend you are using (plain PHP?) but in Laravel you're able to just pass a prop using the blade echoing like this: <credits f="{{ $a }}" c="One></credits> That way you don't have to parse anything.

Collectives™ on Stack Overflow

Passing an array to a component in Vue.js 2.0

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related