在使用 vue.js 和 vue-router 显示路由之前，Rest API 加载数据的速度不够快 [英] Rest API doesn't load data quick enough before the route is shown using vue.js and vue-router
问题描述
将 Vue.js 与 vue-router 与 WP Rest API 2 结合使用.当我切换到一条路线时，我看到应该包含内容的 div 出现，然后内容最终加载.我也收到此错误:
[Vue 警告]:评估表达式content.content.rendered"时出错:TypeError:无法读取未定义的属性rendered"
内容最终会加载到计算机上，即使出现错误，但在移动设备上根本不显示内容.这是我抓取特定页面的方法.我曾尝试使用 nextTick，但无法使其正常运行.
我们将不胜感激，如果您需要更多信息，请告诉我.
<div><div class="动画餐饮包装"><h1>{{ content.title.rendered }}</h1>{{{ content.content.rendered }}}</模板><脚本>导出默认{数据() {返回 {内容: []}},准备好:函数(){this.loadContent();},方法: {加载内容:函数(){this.$http.get('http://localhost/t/wp-json/wp/v2/pages/82').then(function(response){this.content = response.data;});}}}
一个简单的解决方法是阻止 Vue 尝试访问对象属性:.首先将初始 content 值设置为 null，根据您的示例，没有理由将 is 设置为空数组.看起来它将从您的响应数据中分配一个对象.然后，在您看来，只需执行以下操作:
{{{ 内容 ?content.content.rendered : null }}}Using Vue.js with vue-router in unison with WP Rest API 2. When I switch to a route I see the div appear that should hold the content, and then the content finally loads. I also get this error:
[Vue warn]: Error when evaluating expression "content.content.rendered": TypeError: Cannot read property 'rendered' of undefined
The content will load on a computer eventually, even with the error, but on mobile the content doesn't show up at all. This is my method do grab a specific page. I have tried using nextTick but couldn't get it to function correctly.
Any help would be greatly appreciated, and please let me know if you need more information.
<template>
<div>
<div class="animated cateringWrap">
<h1>{{ content.title.rendered }}</h1>
{{{ content.content.rendered }}}
</div>
</div>
</template>
<script>
export default {
data() {
return {
content: []
}
},
ready: function(){
this.loadContent();
},
methods: {
loadContent: function() {
this.$http.get('http://localhost/t/wp-json/wp/v2/pages/82').then(function(response){
this.content = response.data;
});
}
}
}
</script>
A simple fix is to prevent Vue from trying to access the object property:.
First set the initial content value to null, based on your example, there is no reason to set is as an empty array. Looks like it will get assigned an object from your response data. Then, in your view, just do this:
{{{ content ? content.content.rendered : null }}}
这篇关于在使用 vue.js 和 vue-router 显示路由之前，Rest API 加载数据的速度不够快的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
