Vue组件属性未定义

Question

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

<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)
},

为什么数据未定义？

Answer 1

你可以做 ：

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