我想使用 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组件，它是一种用于更改订单状态的表单。订单 ID 通过 props 传递给组件。组件内容如下所示：
///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>
当管理员提交表单订单状态在数据库中更新并发出事件前夕时。此事件用于将订单的 id 传递给状态更改的组件。该组件放置在用户面板中，并包含订单状态已更改的通知。
///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 为静态或频道为公共时，此代码可以正常工作。请帮忙。