Updating vue file on changes - Laravel Echo Pusher Notifications - laravel

Question

So for the past few days i have tried to make this template auto reload when something new has happened. That is when "Notifications" has been modified, either by new entry has ben added or that a notification has been marked as read.
I use a dropdown to show the results, and right now i have to reload the whole page when something happens. Which isn't very nice for a modern application.
PS. I'm completely new to Vue, since this integration with laravel notifications.
This is my .vue file (and you can see i have tried a few things myself without success)
<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">
<i class="fa fa-eye"></i> Visa Alla
</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>
My 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
}
}
});
Thank you in advance for anyone who can help me solve this!

Answer 1

As I understand it, do you want to render multiple notifications each time you receive new notifications data?
In such a case, you can use props.
if you inject props to notification component, the notification component will be re-rendered whenever the props changes
example
<notification :notifications='notifications'><notification>
https://v2.vuejs.org/v2/guide/components-props.html