Vue组件属性未定义

时间:2019-04-17 21:22:00

标签: javascript vue.js components pug

我对Vue很陌生。我有一个间隔发生的AJAX请求,并更新了我的Pug模板中使用的对象。当使用双花括号单独引用数据时,它会很好显示,但是在每个循环中使用诸如a的名称时,它都是未定义的,并且会破坏组件。

<template lang="pug">
.mycomponent
  p {{ data }}  <- this reference to data works fine
  if data != undefined <- this reference to data is undefined
    each val, index in data
      li= val + ': ' + index
</template>

要设置数据,我正在这样做:

mounted () {
  setInterval(() => {
    axios.get('http://localhost:3000/api/info')
      .catch((error) => console.log(error.request))
      .then(response => {
        this.data = response.data
      })
  },
  3000)
},

为什么数据未定义?

1 个答案:

答案 0 :(得分:1)

您可以:

<template lang="pug">
.mycomponent
  p {{ data }}
  ul(v-if="data !== undefined")
    li(v-for="(val, index) in data") {{ val }} : {{ index }}
</template>