I've encountered an issue with passing an array to a component in Vue.js. While strings pass without any problem, arrays seem to be causing some trouble. Here is the code snippet that I'm working with:
Vue Component 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 {
}
},
HTML/PHP Section
<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 scenario, the "c" parameter works as expected but the "f" parameter does not behave properly when passing an array.
Could someone provide insights on how to resolve this issue effectively?