Мне бы хотелось создать систему отслеживания заказов в реальном времени, используя laravel, vue и pusher.В админ-панели у меня есть список всех заказов.Идея заключается в том, что когда администратор изменит статус заказа, пользователь (владелец этого заказа) получит уведомление без обновления страницы.Для этого я хочу использовать частные каналы.Моя проблема заключается в том, чтобы динамически создавать имя частного канала.
Панель администратора выглядит как показано ниже.
<h1>Admin</h1>
<table>
@foreach ($orders as $o)
<tr>
<td>{{$o->name}}</td>
<td>{{$o->status}}</td>
<td>{{$o->getUser->name}}</td>
<td>
<update-order-status :id="{{$o->id}}"></update-order-status>
</td>
</tr>
@endforeach
</table>
Существует update-order-status компонент, который используется для изменения статуса заказа.Идентификатор заказа передается компоненту через реквизит.Содержимое компонента выглядит следующим образом:
///update-order-status component
<template>
<div>
<form method="GET" action="change_status">
<input type="hidden" name="id" :value=id />
<select name="status">
<option value="placed">Placed</option>
<option value="progres">Progres</option>
<option value="delivered">Delivered</option>
</select>
<input type="submit" value="update status" v-on:click="upd(id)" />
</form>
</div>
</template>
<script>
export default {
created() {
},
props: ["id"],
data: function() {
return {
};
},
methods: {
upd: function(id) {
this.$root.$emit("eve", id);
}
}
};
</script>
Когда администратор отправляет форму заявки, статус заказа обновляется в базе данных, а также генерируется событие eve .Это событие используется для передачи идентификатора заказа в измененный статус compoennt.Этот компонент размещен на панели пользователя и содержит уведомление о том, что статус заказа был изменен.
///status changed component
<template>
<div v-if="sn" class="notification is-primary">
<button class="delete" v-on:click="del()"></button>
Staus of order nr {{nr}} has been changed
</div>
</template>
<script>
export default {
created() {
this.$root.$on("eve", data => {
this.nr = data;
});
Echo.private("order" + this.nr).listen("status_changed", e => {
this.sn = true;
});
},
props: [],
data: function() {
return {
sn: false,
nr: 0
};
},
methods: {
del: function() {
this.sn = false;
}
}
};
</script>
Вот проблема.Переменная nr всегда равна 0.Это не меняется динамически.Когда nr является статическим или канал общедоступен, этот код работает нормально.Пожалуйста, помогите.