Rest API使用vue.js和vue-router

将vue.js与vue-router一起使用，并与WP Rest API 2一起使用，从而不会加载足够快的数据。当我切换到路由时， div出现应该保存内容，然后内容最终加载。我也收到此错误：Rest API使用vue.js和vue-router

[Vue公司提醒]：错误评估表达“content.content.rendered”时：类型错误：无法读取的不确定

内容将在计算机上加载最终“渲染”属性，即使出现错误，但在移动设备上，内容根本不会显示。这是我的方法确实抓住特定页面。我曾尝试使用nextTick，但无法使其正常工作。

任何帮助将不胜感激，请让我知道，如果你需要更多的信息。

<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>

alt text http://oi67.tinypic.com/20ker05.jpg

来源

2016-06-09 4ndy

我建议在这里发布代码，而不是图像。 – crabbly

使用VUE路由器的数据挂钩。

http://router.vuejs.org/en/pipeline/data.html

route: { 
    data: function (transition) { 
    return this.$http.get(...); 
    } 
}

然后，在模板：

<div v-if="$loadingRouteData">Loading ...</div> 
<div v-else>Your current HTML.</div>

来源

2016-06-09 16:43:55 ceejayoz

我在index.js中调用路由 - 不确定我要添加代码的位置。 ' router.map（{ '/家'：{ 组件：首页 }， ' – 4ndy

@ 4ndy的'路线：{}'块进入你的'.vue'组件文件这是一个块像' ready'或'methods'是 – ceejayoz

这很好，但过渡效果已经消失了，我使用的是animate.css反弹效果，你基本上做了什么就得到了一个预装载器屏幕，谢谢你。现在虽然有更多的错误，但仍然是我试图摆脱的错误： ** [Vue warn]：评估表达式“content.content.rendered”时出错：TypeError：Can not read property' 'undefined ** The我现在得到的其他错误： – 4ndy

一个简单的解决方法是防止Vue的尝试访问的对象属性：。首先将初始值content的值设置为null，根据你的例子，没有理由将其设置为空数组。看起来它会从您的响应数据中分配一个对象。然后，在你看来，只要这样做：

{{{ content ? content.content.rendered : null }}}

来源

2016-06-10 02:24:23 crabbly

Rest API使用vue.js和vue-router

回答

相关问题