Как создать имя частного канала динамически

Question

Я хотел бы создать систему отслеживания заказов в реальном времени, используя 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>

Когда администратор отправляет форму, статус заказа обновляется в базе данных, а также генерируется канун события. Это событие используется для передачи идентификатора заказа компоненту с измененным статусом. Этот компонент размещен в пользовательской панели и содержит уведомление о том, что статус заказа был изменен.

///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 является статическим или канал общедоступен, этот код работает нормально. Пожалуйста помоги.

Answer 1

Положить Echo внутри $on, В противном случае асинхронный $on бывает слишком поздно, чтобы изменить nr в Echo,

  created() {
    this.$root.$on("eve", data => {
      this.nr = data;
      Echo.private("order" + this.nr).listen("status_changed", e => {
        this.sn = true;
      });
    });
  }