0

将 Vue.js 与 vue-router 与 WP Rest API 2 一起使用。当我切换到路由时，我看到应该保存内容的 div 出现，然后内容最终加载。我也收到此错误：

[Vue 警告]：评估表达式“content.content.rendered”时出错：TypeError：无法读取未定义的属性“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>

替代文字

4

2 回答 2

1

使用 vue-router 的数据挂钩。

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-09T16:43:55.870 回答
1

一个简单的解决方法是阻止 Vue 尝试访问对象属性：。首先将初始content值设置为null，根据您的示例，没有理由将其设置为空数组。看起来它将从您的响应数据中分配一个对象。然后，在您看来，只需执行以下操作：

{{{ content ? content.content.rendered : null }}}
于 2016-06-10T02:24:23.650 回答