将对象匹配到数组以在 vuejs 中进行排序

Question

我正在构建一个包含大约 3,000 个房间的 SPA 聊天应用程序。主页将根据活跃参与者的数量对每个房间进行排名。

为此，我正在使用 Laravel、Vuejs、Laravel Echo 和 Socket.io。

我在这里构建了一个简单版本的应用程序以了解我的代码库：https://jsfiddle.net/benjifisher/3cotxu29/

本质上，我正在使用 Laravel Echo Server HTTP API 端点来检索频道数据。我列出渲染每个房间的频道数。

我需要的建议是如何根据订阅计数值对房间进行排序。我了解我需要将对象与数组匹配并可能推送到新数组？

下面是一个片段

new Vue({
  el: "#app",

  data: {
    rooms: [
      { id: 1, name: "Room 1", url: 'room1'},
      { id: 2, name: "Room 2", url: 'room2' },
      { id: 3, name: "Room 3", url: 'room3' },
      { id: 4, name: "Room 4", url: 'room4' },
      { id: 5, name: "Room 5", url: 'room5'},
      { id: 6, name: "Room 6", url: 'room6' },
      { id: 7, name: "Room 7", url: 'room7' },
      { id: 8, name: "Room 8", url: 'room8' }
    ],
    channels: {
            channels: {
        presence_room4: {
            occupied: true,
          subscription_count: 2,
        },
        presence_room5: {
            occupied: true,
          subscription_count: 1,
        }
        }
    }

  },
  computed: { 

  },
  methods: {

  }
})

提前致谢。

本

Answer 1

请检查 https://jsfiddle.net/Mark_f/vynqmtb2/ 更新代码。

我更新了你的代码：

在watch方法中计算并排序room_channel_array房间和通道之间的映射
显示已排序的房间 room_channel_array

您可以使用一些第 3 方库，例如 lodash 让您的生活更轻松。

将对象匹配到数组以在 vuejs 中进行排序

Match an object to an array for sorting in vuejs

socket.io

laravel-5

vuejs2

laravel-echo