How can I pass data to a required vue component? - laravel

Question

I'm trying to follow this example code https://laravel.com/docs/7.x/broadcasting#using-example-application
I already made a controller with this code:
public function send()
{
$orderId = 5;
broadcast(new TestEvento($orderId));
return view('test.send');
}
public function receive()
{
$orderId = 5;
return view('test.receive', compact('orderId'));
}
An event with this code:
public $orderId;
/**
* Create a new event instance.
*
* #return void
*/
public function __construct($orderId)
{
$this->orderId = $orderId;
Log::debug('Construct orderId: '.$orderId);
}
/**
* Get the channels the event should broadcast on.
*
* #return \Illuminate\Broadcasting\Channel|array
*/
public function broadcastOn()
{
Log::debug('broadcastOn: '.$this->orderId);
return new PrivateChannel('canaltest.'.$this->orderId);
}
A route:
Broadcast::channel('canaltest.{var}', function ($user, $var) {
return true; //temp workaround
return $user->id === Order::findOrNew($var)->user_id;
});
A view with this:
<div id="app">
<test :orderId="{{$orderId}}"></test>
</div>
Added this line to app.js:
Vue.component('test', require('./components/Test.vue').default);
And a .vue with
<script>
export default {
mounted() {
console.log('Component mounted.');
}
}
Echo.private('canaltest.${orderId}')
.listen('TestEvento', (e) => {
console.log(e);
});
</script>
The problem is I just can't find a way to get the js to get the orderId var and there's nowhere in vue documentation that says where should I place the .props array when requiring a component in app.js. So how can I get my test.vue component to read the orderId var?

Answer 1

I believe what you're looking for as below for test.vue
<script>
export default {
props: {
orderId: {
type: [Number, String],
required: true
},
},
mounted() {
console.log('Component mounted.');
}
}
</script>