通过props将数据从父组件传递到子组件时，数据在子组件的挂接挂接中显示为未定义

Question

在我的父组件中：

<UsersList :current-room="current_room" />

在子组件中：

export default {
    props: {
        currentRoom: Object
    },
    data () {
        return {
            users: []
        }
    },
    mounted () {
        this.$nextTick( async () => {
            console.log(this.currentRoom) // this, weirdly, has the data I expect, and id is set to 1
            let url = `${process.env.VUE_APP_API_URL}/chat_room/${this.currentRoom.id}/users`
            console.log(url) // the result: /api/chat_room/undefined/users
            let response = await this.axios.get(url)
            this.users = response.data
        })
    },
}

当我使用vue-devtools查看页面时，我可以看到数据出现：

​

​

Answer 1

我在过去遇到过这个问题--就像many others一样。无论出于什么原因，您都不能依赖组件的mounted处理程序中提供的props。我认为这与在Vue's lifecycle中调用mounted()的位置有关。

我通过观察道具并将我的逻辑从挂载转移到手表处理程序来解决我的问题。在您的示例中，您可以查看currentRoom属性，并在处理程序中进行您的api调用：

export default {
  props: {
    currentRoom: Object
  },
  data() {
    return {
      users: []
    }
  },
  watch: {
    currentRoom(room) {
      this.$nextTick(async() => {
        let url = `${process.env.VUE_APP_API_URL}/chat_room/${room.id}/users`
        let response = await this.axios.get(url)
        this.users = response.data
      })
    }
  },
}

我不认为你真的需要在这里使用$nextTick()，但我把它留在了原处。你可以试着去掉它来简化代码。

顺便说一句，console.log(this.currentRoom);之所以向您显示房间ID，是因为当您向console.log()传递一个对象时，它将绑定到该对象，直到它被读取为止。因此，即使房间ID在调用console.log()时不可用，但在控制台中看到结果之前，它会变为可用。