Блог

Я довольно новичок в Vue. У меня есть AJAX-запрос, который выполняется с интервалом и обновляет объект, который используется в моем шаблоне Pug. Когда на данные ссылаются только с помощью двойных фигурных скобок, они отображаются нормально, но когда они используются в чем-то вроде цикла for each, они не определены и прерывают работу компонента.

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

Почему данные не определены?

Вы можете сделать :

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