更新 vue 文件的变化 - Laravel Echo Pusher 通知

Question

所以在过去的几天里，我试图让这个模板在发生新事情时自动重新加载。即“通知”已被修改，无论是通过添加新条目还是通知已被标记为已读。

我使用下拉菜单来显示结果，现在我必须在发生某些事情时重新加载整个页面。这对于现代应用程序来说不是很好。

附言。由于与 laravel 通知的集成，我对 Vue 完全陌生。

这是我的 .vue 文件（你可以看到我自己尝试了一些事情但没有成功）

<template>
    <li class="dropdown">
        <a href="#" class="dropdown-toggle icons" data-toggle="dropdown" role="button"
           aria-haspopup="true" aria-expanded="false">
            <span class="badge badge-dark badge-corner fs-11">{{ notifications.length }}</span>
            <i class="fas fa-bell fs-15" style="color: #444;"></i>
        </a>
        <ul
            class="dropdown-menu dropdown-menu-right notify-drop">
            <li>
                <div class="notify-drop-title">
                    <div class="row">
                        <div class="col-10">Notifikationer (<b>{{ notifications.length }}</b>)</div>
                        <div class="col-2 text-right">
                            <button class="rIcon allRead"
                                    data-tooltip="tooltip"
                                    data-placement="bottom"
                                    title="Markera alla som lästa"><i
                                class="fa fa-bullseye fs-12"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <!-- end notify title -->
                <!-- notify content -->
                <div class="drop-content">
                    <div class="thisItem" v-for="notification in notifications" :key="notification.id">
                        <div class="row pl-10">
                            <div class="col-1">
                                <div
                                    v-if="notification.data.type === 'friend' || notification.data.type === 'friendAccept'">
                                    <i class="fas fa-heart fs-25 primary mt-5"></i>
                                </div>
                                <div v-if="notification.data.type === 'friendDeny'">
                                    <i class="fas fa-heart-broken fs-25 primary mt-5"></i>
                                </div>
                            </div>
                            <div class="col-10 ml-5">
                                <button class="float-right rIcon mr-1" data-toggle="tooltip"
                                        data-placement="top" title="Markera som läst"
                                        v-on:click="MarkAsRead(notification)">
                                    <i class="fa fa-bullseye fs-12"></i>
                                </button>

                                <a class="fs-14 m-0" style="text-transform: none;" :href="'/profile/' + notification.data.accessurl">{{
                                    notification.data.fromuser }}</a>
                                <span class="fs-12 m-0 text-muted">{{ notification.data.message }}</span>

                                <div v-if="notification.data.type === 'friend'">
                                    <button type="button" class="btn btn-primary btn-sm"
                                            v-on:click="AcceptFriend(notification)">Acceptera
                                    </button>
                                    <button type="button" class="btn btn-primary btn-sm"
                                            v-on:click="DenyFriend(notification)">Neka
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="notify-drop-footer text-center">
                    <a href=""><i class="fa fa-eye"></i> Visa Alla</a>
                </div>
            </li>
        </ul>
    </li>
</template>

<script>
    export default {
        props: ['notifications'],
        methods: {
            MarkAsRead: function (notification) {
                const data = {
                    id: notification.id
                };
                const self = notification;
                axios.post('/notification/read', data).then(response => {
                    //self.id = '';
                    //self.$forceUpdate();
                    //self.notification += 1;
                    //self.setState({notification: response.data});
                    //self.data.fromuser = '';
                    //self.data.message = response.data;
                    //this.notifications.splice(notification,1);
                    console.log(response.data);
                });
            },
            AcceptFriend: function (notification) {
                const data = {
                    id: notification.id,
                    friendid: notification.data.itemid,
                    fromuserid: notification.data.fromuserid
                };

                axios.post('/notification/acceptFriend', data).then(response => {
                    console.log(response.data);
                });

                axios.post('/notification/read', data).then(response => {
                    console.log(response.data);
                });
            },
            DenyFriend: function (notification) {
                const data = {
                    id: notification.id,
                    friendid: notification.data.itemid,
                    fromuserid: notification.data.fromuserid
                };

                axios.post('/notification/denyFriend', data).then(response => {
                    console.log(response.data);
                });

                axios.post('/notification/read', data).then(response => {
                    console.log(response.data);
                });
            }
        }
    }
</script>

我的 app.js

Vue.component('notification', require('./components/Notification.vue'));

const app = new Vue({
    el: '#app',
    data: {
        notifications: ''
    },
    created() {
        axios.post('/notification/get').then(response => {
            this.notifications = response.data;
        });

        var userId = $('meta[name="userId"]').attr('content');
        Echo.private('App.User.' + userId).notification((notification) => {
            this.notifications.push(notification);
        });
    },
    computed: {
        notifications: function () {
            return this
        }
    }
});

提前感谢任何可以帮助我解决此问题的人！

Answer 1

据我了解，您是否希望每次收到新的通知数据时都呈现多个通知？

在这种情况下，您可以使用props。 如果您将props 注入到通知组件中，则每当props 更改时，通知组件都会重新渲染

例子

<notification :notifications='notifications'><notification>

https://vuejs.org/v2/guide/components-props.html