Vuejs2 使用EventBus传递用户ID以调用API，但不会将响应绑定到输入字段

我使用EventBus将用户ID传递给另一个组件（

UpdateStaff

）。然后，我想在

url/API/staff/{UserId}

调用一个API，以获取该特定用户的数据并将数据绑定到输入字段。我能够获得响应负载，但无法绑定到输入字段

UpdateStaff.vue:

模板中输入字段的示例：

<input class="input" type="text" placeholder="Username" v-model="data.username">

Staff.vue:

其中包含一个vuetable组件以显示所有人员。单击Update按钮后，我通过调用

onActions

方法重定向到UpdateStaff页面

methods: {
  onActions (action, data) {
    router.push({ path: '/user/UpdateStaff' })
    EventBus.$emit('getUserId', action.data.userId)
  }
}

以前，我只需使用

axios

即可在输入字段中显示数据。然而，在添加了

EventBus

和

axios

之后，我无法再在输入字段中显示数据了

---

我应该如何着手解决此问题？

无法正确看到数据更新的原因是

在
中引用Vue实例时，此
不是Vue实例。然后
回调

将
let self=this
语句放在创建的
钩子的最开始处，以确保存储了对
this
的正确引用：

created () {
  let self = this
  // after this point, `self` will reference the Vue instance even in callbacks

  EventBus.$on('getUserId', (userId) => {
    axios.get(staffUrl + '/' + userId)
      .then((response) => {
        // setting `self` to `this` here doesn't make sense because `this` 
        // is not refering to the Vue instance in this callback

        self.data.username = response.data.username
        self.data.name = response.data.name
      })
      .catch((error) => {
        console.log(error)
      })
  })
}


推送到该路由时未处理
getUserId
事件的原因是
$emit
事件是在创建
UpdateStaff
组件之前触发的（意味着尚未设置
$on
处理程序）

要等待组件创建完成，请将
$emit
包装在
this.$nextTick
回调中：

methods: {
  onActions (action, data) {
    router.push({ path: '/user/UpdateStaff' })
    this.$nextTick(() => {
      EventBus.$emit('getUserId', action.data.userId)
    })
  }
}

从使用
Vue.nextTick
开始：

将回调延迟到下一个DOM更新周期之后执行。在更改某些数据以等待DOM更新后立即使用它

您好@thanksd，感谢您的帮助和资源！但是让self=this
，由于某些原因，数据仍然没有显示在输入字段中。能否显示数据属性定义以及如何将其绑定到输入？Hi@thanksd，数据属性：
data（）{return{data:name:''，username:''}
输入示例：
我不知道此信息是否有用，但如果我在没有EventBus的情况下执行此操作，我可以获得要在输入字段中显示的数据。但是在将axios放入EventBus{}之后，数据将不再显示在输入字段中。有什么想法吗？请编辑您的问题，将其包括在内。你的代码和我更新的答案完全一样吗？我已经更新了我的问题！是的，的确如此@谢谢我编辑了你的问题，将原始的
let self=this
问题包括在内，这样我的答案（以及你问题的一部分）仍然有意义。我已更新我的答案以解决路由问题
methods: {
  onActions (action, data) {
    router.push({ path: '/user/UpdateStaff' })
    this.$nextTick(() => {
      EventBus.$emit('getUserId', action.data.userId)
    })
  }
}