访问javascript内的道具

Question

我刚刚开始学习vuejs 2，但我有一个问题，我将道具传递给这样的子组件：

<div class="user">
  <h3>{{ user.name }}</h3>
  <depenses :user-id="user.id"></depenses>
</div>

这是我在我的子组件中使用它的方式：

export default {
  name: 'depenses',
  props: ['userId'],
  data () {
    return {
      depenses: []
    }
  },
  mounted: function () {
    this.getDepenses()
  },
  methods: {
    getDepenses: function () {
      this.$http.get('myurl' + this.userId).then(response => {
        this.depenses = response.body
        this.haveDepenses = true
      }, response => {
        console.log('Error with getDepenses')
      })
    }
  }
}

this.userId未定义，但我可以用<span>{{ userId }}</span>显示它，我可以在vuejs控制台中看到param userId的值

为什么我在js中有一个未定义的值？

Answer 1

好吧，我发现为什么我无法获得我的价值，感谢@Saurabh的评论，他提醒我，我从异步的方式获取道具，所以当道具改变时我必须设置一个观察者，如下所示：

  watch: {
    userId: function () {
      this.getDepenses()
    }
  },