获取里面的道具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 控制台中看到参数 userId 的值为

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

Answer 1

好的，我找到了为什么我无法获得我的价值，感谢@Saurabh 评论，他提醒我我从异步方式获得我的道具，所以当我的道具改变时我必须设置一个观察者，就像这样:

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

获取里面的道具javascript

Access to props inside javascript

javascript

vue.js

vuejs2