Question

因此，在过去的几天中，我尝试使发生新情况时自动重新加载此模板。就是在修改“通知”时，要么添加新条目，要么将通知标记为已读。

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

PS。我对Vue完全陌生，因为它与laravel通知集成在一起。

这是我的.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

更改时更新vue文件-Laravel Echo Pusher通知

1 个答案: