Vue聊天室点击加入房间后无法激活对应标签问题求助

存在的问题 #

• 违反Vue单向数据流规则：selectedRoomId是父组件传入的prop，子组件内部直接赋值修改无效，还会触发Vue运行时警告
• 代码笔误：joinRoom方法中this.room不存在，你传入的参数是room，不需要加this前缀
• 未触发父组件更新事件：你已经在组件的emits选项中注册了onSelectRoom事件，但没有在加入房间后触发该事件通知父组件更新激活房间
• 重复定义props：组件内先后两次声明props选项，后定义的会覆盖先定义的，导致rooms、selectedRoomId两个prop声明失效

解决方案 #

你的Main.vue中room-tabs组件的selectedRoomId绑定的是currentRoom.id，只要把新加入的房间赋值给currentRoom就能自动激活对应标签，按下面步骤修改即可：

1. 修复RoomList.vue的joinRoom方法

methods: {
  async joinRoom(room) {
    // 等待加入房间的异步操作完成
    await this.$store.dispatch(RoomTypes.JOIN_ROOM, room);
    // 抛出事件将选中的房间传递给父组件，由父组件更新当前激活房间
    this.$emit('onSelectRoom', room);
    // 关闭房间列表弹窗
    this.$emit('onClose');
  }
}

2. 合并重复的props声明

把原来分开的两个props声明合并为一个，避免覆盖失效：

export default {
  // 省略其他配置
  props: {
    rooms: {
      type: Array,
      default: () => []
    },
    selectedRoomId: [String, Number],
    isOpen: Boolean,
    usersCount: Boolean
  },
  // 省略其他配置
}

3. Main.vue中RoomList绑定事件监听

在你引用RoomList组件的地方添加onSelectRoom事件监听，接收子组件抛出的房间对象更新currentRoom：

<room-list 
  :is-open="showRoomList" 
  @on-close="showRoomList = false"
  @on-select-room="currentRoom = $event"
/>

内容的提问来源于stack exchange，提问作者ArcticMediaRyan