How to pass an array from Laravel controller to Vue.js component - laravel

Question

I want to pass an array called hours from a Laravel controller to a Vue.js component but for some reason it's not working.
As you can see in the following code, I am trying to create dynamically the options inside a select that is located inside a component but for some reasons I see no options in that array.
In the view I created a <p> to check that the returning array from controller be correct and finally it is correct because in the view I am able to see the second value of the array.
But for some reasons I cannot visualize the values of the array inside the component.
This is my controller code:
$open_at = '00:00';
$close_at = '23:45';
$time = new DateTime($open_at);
$close = new DateTime($close_at);
while ($time < $close) {
$hours[] = $time->format('H:i');
$time->modify('+15 minutes');
}
return view('create')->with('hours', $hours);
This is my view code:
#extends('layouts.app')
#section('content')
<div class="container">
<div id="app">
<create-form :hours="hours"></create-form>
</div>
<p>
{{ $hours[1] }}
</p>
</div>
#endsection
This is code inside the template component:
<div class="form-group">
<label for="start">Start Hour:</label>
<select class="form-control" id="start">
<option v-for="hour in hours" :key="hour.id">
{{ hour }}
</option>
</select>
</div>
This is the my export_default:
export default {
props: ['hours[]'],
mounted() {
console.log('Component mounted.');
this.loadUsers();
this.loadRooms();
},
data: function() {
return {
users: [],
rooms: []
}
},
methods: {
loadUsers: function() {
axios.get('api/users')
.then((response) => {
this.users = response.data.data;
})
.catch(function(error) {
alert('noviva');
console.log(error);
});
},
loadRooms: function() {
axios.get('api/rooms')
.then((response) => {
this.rooms = response.data.data;
})
.catch(function(error) {
alert('noviva');
console.log(error);
});
}
}
}
I visualize the following warning in the console:
Property or method "hours" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
Can help?

Answer 1

The definition of your props property doesn't match the name by which $hours is passed to the component
props: ['hours'],
And again you do not have id on hours the way you are constructing the hours[] in controller so the template will give another error when you try :key="hour.id
You must either construct the hours array in controller such that it has an id for every entry or (not recommended) you can use the index in the v-for loop as key
<div class="form-group">
<label for="start">Start Hour:</label>
<select class="form-control" id="start">
<option v-for="(hour, index) in hours" :key="index">
{{ hour }}
</option>
</select>
</div>
PHP arrays and objects can be passed to javascript/vue as props by json encoding them
//Using the blade helper #json
<div id="app">
<create-form :hours='#json($hours)'></create-form>
</div>
//OR using json_encode()
<div id="app">
<create-form :hours="{{ json_encode($hours) }}"></create-form>
</div>