访问javascript内的道具

时间:2017-02-05 16:16:40

标签: javascript vue.js vuejs2

我刚刚开始学习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中有一个未定义的值?

1 个答案:

答案 0 :(得分:0)

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

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