passingt data between components using $broadcast and $dispatch

I am trying to build an online casino. I have two components, one parent games component and another player component. I havge spen t hours on google trying to find an answer but I feel my inexperience with Vue is getting in the way.

I am making an ajaX request to the server to fetch a list of available games with ready players. I set up my routes.php file to grab a list of users who have a ''player1'' set. What I am struggling to understand is how to extract that player1 id from the database and pass it to a player element using props. I am then trying to use vue's dispatch and and broadcast methods to pass this prop data to the games component so I can make my ajAX request. SO far, i get a blank page. Here is my template:

'''extends('app')

@section('content')

</div>

Play against @{{ game.player1 }}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.0.3/vue-resource.js"></script>

<script src="js/all.js"></script>

@endsection '''

and here is my all.js file

'''Vue.component('games', { template: '#games-template',

data: function() {
    return {
        player1: null,
        games: []


    }



},

events: {
    'Updateplayer1' : function(data) {
        this.$broadcast('Updateplayer1', data);
    }
},

created: function() {
   var player1 = this.player1;
    this.$http.get('api/games/ready/'.player1).then(function(games) {
        this.games = games;

    });

}

}); Vue.component('player', { 00-=-=

props: ['player1'],

created: function() {
    this.$dispatch('UpdatePlayer1', this.player1);
}

});

new Vue({ el: 'body'

});'''

I'm pretty sure I am just misusing the concepts and I am hoping someone out there would be kind enough to point out what I am doing wrong. I am very new to Vue.js and a low of this stuff is very confusing. any help is greatly appreciated/

dorotyadams

1 year ago

Level 1

It looks like you're encountering a few common issues when starting with Vue.js, especially with older versions like Vue 1.x, which uses different concepts compared to the latest Vue versions. Here’s a breakdown of what might be going wrong and how to fix it.

Understanding Vue Events and Data Binding In Vue.js 1.x, communication between components can be done using events and props. However, the syntax you used for broadcasting and dispatching events is slightly off.
Prop Handling Props in Vue.js are used to pass data from a parent component to a child component. In your code, you have defined a player component with a player1 prop. This is correct, but you’re trying to use $dispatch and $broadcast, which are no longer recommended for child-to-parent communication.
Component Communication In Vue 1.x, you typically use $emit to send an event from a child component to its parent. Instead of $dispatch, you should use $emit. Additionally, you should avoid using $broadcast since it is not suitable for sending data back to parent components.
Blank Page Issue A blank page can be due to several reasons, such as:

Incorrect script linking or outdated versions. Incorrect use of Vue.js directives and methods. Errors in JavaScript code preventing Vue from mounting. Corrected Code and Approach Let’s refactor your code based on best practices for Vue 1.x:

Template Changes: Ensure your HTML structure is properly defined and Vue is correctly referenced.

@extends('app')

@section('content')

@endsection JavaScript Changes: Define your Vue components properly and utilize $emit for child-to-parent communication. Vue.component('games', { template: '#games-template', data: function() { return { player1: null, games: [] } }, events: { 'updatePlayer1': function(data) { this.player1 = data; this.fetchGames(); } }, methods: { fetchGames: function() { var player1 = this.player1; this.$http.get('api/games/ready/' + player1).then(function(response) { this.games = response.data; }); } }, created: function() { this.fetchGames(); } });

Vue.component('player', { props: ['player1'], template: 'Play against @{{ player1 }}', created: function() { this.$emit('updatePlayer1', this.player1); } });

new Vue({ el: '#app' });

Key Adjustments Event Emitting: Change $dispatch to $emit in your player component. This allows player to send data to the parent scope, which is captured by the games component. Dynamic Data Binding: Use this.$emit('updatePlayer1', this.player1) to emit the event to the parent, then listen for it in the parent with events. Fetch Data Properly: Ensure you're appending strings correctly in your AJAX request with 'api/games/ready/' + player1. HTML Binding: Make sure your HTML has the correct root element with id="app" or the desired ID for your Vue instance to mount. By making these changes, you should be able to pass data correctly between components and avoid the blank page issue. Make sure to check your browser’s console for any additional errors that might give you more clues.