Обновление компонента в реальном времени с Vue, Laravel и Pusher - PullRequest
Новая
       43

Обновление компонента в реальном времени с Vue, Laravel и Pusher

0 голосов
/ 26 февраля 2020

Я боролся с VUE уже пару дней, и у меня есть то, что мне нужно ПОЧТИ, но одна вещь ускользает от меня; обновление в режиме реального времени.

ЧТО Я ДОСТИГНУЛ

Просмотр компонента настроен и работает в блейде, как и должно быть. Я могу получить sh новые данные к консоли в режиме реального времени, что означает .... Моя настройка "Pusher" правильная

ЧТО Я НЕ МОГУ ДОСТИГНУТЬ

Обновление коллекции новыми данными это было опубликовано (но помните, что эти данные попадают на страницу, поскольку я могу распечатать их на консоли.

ЗДЕСЬ, ЧТО Я ИМЕЮ

VUE Компонент 

<template>
    <div>

        <div class="card shadow mb-4"  v-for="question in event.questions">
            <div class="card-header gradient_bg d-flex justify-content-between align-items-center">
                <div class="">
                    {{question.created_at}}
                </div>
                <div class="">
                    <ul class="nav nav-pills card-header-pills float-right">
                        <li class="nav-item ml-2">
                            <a onclick="var result = confirm('Ban this user? All their questions will be deleted and the user will be blocked from posting any more.');" class="btn bg-white nav-link " :href="'/ban-user/' + question.question_token"> <i
                                    class="fas fa-ban text-black-50"></i></a>
                        </li>
                        <li class="nav-item ml-2">
                            <a onclick="var result = confirm('Archive this question for later?');" class="btn bg-white nav-link text-light" :href="'/archive-question/' + question.question_token"> <i
                                    class="fas fa-archive text-black-50"></i></a>
                        </li>
                        <li class="nav-item ml-2">
                            <a onclick="var result = confirm('Are you sure you want to delete this question?');" class="btn bg-white nav-link text-light" :href="'/delete-question/' + question.question_token"> <i
                                    class="fas fa-trash-alt text-black-50"></i></a>
                        </li>
                        <li class="nav-item ml-2">
                            <a class=" btn bg-white text-light font-weight-bold  nav-link"
                               href="#"><i class="fas fa-star text-black-50"></i></a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="card-body p-3">
                <h5 class="card-title">{{question.question}}</h5>
                <div class="answer-area" style="display:none">
                    <form class="" method="POST" action="/add-answer/:question.question_token">
                        @csrf
                        <textarea rows="5" class="d-block w-100 mb-2 p-3" name="answer"></textarea>
                        <input type="submit" name="" class="btn btn-brand3 text-white fw900 px-5" value="Submit Answer"
                               placeholder="" id="">
                    </form>
                </div>
                <a href="#" :id="'answer-button' + question.id" class="btn btn-brand float-right px-5">Answer</a>
                <a href="#" id="close-button" style="display:none"
                   class="btn btn-danger text-white float-right px-5">Cancel</a>
            </div>
        </div>



    </div>
</template>



<script>
    export default {
        props: ['event'],
        mounted() {
            console.log('Component mounted.');

            // Enable pusher logging - don't include this in production
            Pusher.logToConsole = true;

            var pusher = new Pusher('*************', {
                cluster: 'eu',
                forceTLS: true
            });

            var channel = pusher.subscribe('my-channel');
            channel.bind('my-event', function(data) {
                location.reload();
            });

        }
    }

</script>

ШАБЛОН ЛЕЗВИЯ 

@extends('layouts.app')

@section('content')
    {{--    <meta http-equiv="Refresh" content="15">--}}
    <div class="container">
        <div class="row justify-content-center mb-4">
            <div class="col-12">

            </div>
        </div>

        <div class="row">
            <div class="col-12 col-md-4">
                <div class="card shadow mb-4">
                    <div class="card-header gradient_bg d-flex justify-content-between align-items-center">
                        <div class="">
                            <h5 class="card-text py-2">Event Details</h5>
                        </div>
                    </div>
                    <div class="card-body p-3">
                        <h3>{{$event->event_name}}</h3>
                    </div>
                </div>
            </div>
            <div class="col-12 col-md-8" id="questions">
                <questions :event="{{$event}}"></questions>

            </div>
        </div>
    </div>




@endsection

ПРИЛОЖЕНИЕ. JS

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');

/**
 * The following block of code may be used to automatically register your
 * Vue components. It will recursively scan this directory for the Vue
 * components and automatically register them with their "basename".
 *
 * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
 */

// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))

Vue.component('questions', require('./components/Questions.vue').default);

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

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

Я хотел бы знать, что мне не хватает. Вся помощь очень ценится .

...