Maison > Article > interface Web > Comment résoudre le problème que la page d'acquisition de données Vue ne s'affiche pas
Dans les applications Vue, vous pouvez rencontrer une situation dans laquelle les données sont obtenues mais ne peuvent pas être affichées sur la page. Ci-dessous, nous analyserons les problèmes possibles et proposerons des solutions sous les aspects suivants.
La liaison de données Vue est l'une des fonctionnalités principales de Vue et l'une des clés pour rendre les applications Vue uniques. Dans Vue, il vous suffit de lier les données à la vue et la vue peut être mise à jour en temps réel. Habituellement, nous lions les données et les vues via une liaison de données bidirectionnelle et des instructions personnalisées. Si la liaison des données échoue, la page ne pourra pas afficher les données.
Solution :
Dans les applications Vue, le moment de l'acquisition des données est très critique et les données doivent être chargées avant le chargement de l'instance Vue. Sinon, il y aura un problème car la page ne s'affichera pas après avoir obtenu les données.
Solution :
Exemple de code :
// 假设已经通过axios或其他方式获取到了数据 const data = { // 数据内容 }; // 在Vue实例创建之前,将数据赋值给window对象上的全局变量 window.data = data; // 在Vue实例中,读取全局变量中的数据 new Vue({ el: '#app', data: { data: window.data } });
Exemple de code :
new Vue({ el: '#app', data: { data: null }, created() { axios.get('/api/data') .then(res => { this.data = res.data; }) .catch(e => { console.log(e); }); } });
Parfois, des opérations asynchrones peuvent être effectuées, telles que l'obtention de données via des requêtes ajax. Si l'opération asynchrone n'attend pas la fin avant d'effectuer la liaison de données, la page ne pourra pas afficher les données.
Solution :
Exemple de code :
new Vue({ el: '#app', data: { data: null }, created() { this.getData() .then(data => { this.data = data; }) .catch(error => { console.log(error); }); }, methods: { getData() { return new Promise((resolve, reject) => { axios.get('/api/data') .then(res => { resolve(res.data); }) .catch(e => { reject(e); }); }); } } });
Exemple de code :
<div v-if="data"> <!-- 显示数据 --> </div> <div v-else> <!-- 显示加载中的占位符等内容 --> </div>
Dans une application Vue, l'échec de l'affichage des données peut être dû à un échec de liaison de données, à un timing incorrect d'acquisition de données ou à des opérations asynchrones qui n'attendent pas leur achèvement. Lors de la résolution de ces problèmes, vous pouvez d'abord vérifier la version de Vue, la syntaxe de la liaison des données, si les données ont été liées avec succès, etc. pour vous assurer que la liaison des données est réussie. Si le moment de l'acquisition des données est incorrect, vous pouvez charger les données avant la création de l'instance Vue ou utiliser la fonction de cycle de vie fournie par Vue pour charger les données après le chargement de l'instance Vue. S'il existe une opération asynchrone, vous devez vous assurer que l'opération asynchrone est terminée avant la liaison des données.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!