詳解Vue-Cli 異步加載數(shù)據(jù)的一些注意點(diǎn)

發(fā)布時(shí)間：2020-09-15 12:26:29 來(lái)源：腳本之家閱讀：157 作者：Evgni0n 欄目：web開發(fā)

剛開始學(xué)vue的時(shí)候沒(méi)有使用腳手架，現(xiàn)在用腳手架寫法有點(diǎn)不同，今天遇到的問(wèn)題是使用豆瓣api異步加載數(shù)據(jù)的時(shí)候，會(huì)一直在命令行上報(bào)錯(cuò)，基本上錯(cuò)誤都是xxx 未定義。

例子

<template>
<div v-if="moviesData">

  <!-- 正在上映的電影-北京 -->
  <h2>{{ moviesData.title }}</h2>
  
</div>
</template>

<script>
import jsonp from 'jsonp'  // 一個(gè)jsonp插件 npm install jsonp --save

export default {
 data(){
  return {
   moviesData: null    // 如果不事先給一個(gè)默認(rèn)值的data，就會(huì)報(bào) xxx is not define
  }
 },
 
 // 生命周期函數(shù)
 created(){

  // 發(fā)送請(qǐng)求
  jsonp('https://api.douban.com/v2/movie/in_theaters', null, (err, data)=>{
   this.moviesData = data;
  });
 }
}
</script>

在發(fā)送異步請(qǐng)求的時(shí)候要注意兩個(gè)點(diǎn)：

數(shù)據(jù)的初始值，我這里是給null作為初始值。

判斷數(shù)據(jù)是否存在，在html中，我用v-if判斷moviesData是否存在，可以確保只有在數(shù)據(jù)存在的時(shí)候才會(huì)渲染。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問(wèn)一下細(xì)節(jié)

詳解Vue-Cli 異步加載數(shù)據(jù)的一些注意點(diǎn)

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽