0

WP Rest API 2 と調和して vue-router で Vue.js を使用します。ルートに切り替えると、コンテンツを保持する必要がある 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 がオブジェクト プロパティにアクセスしようとするのを防ぐことです。あなたの例に基づいて、最初に初期content値をに設定します。空の配列として設定する理由はありません。null応答データからオブジェクトが割り当てられるようです。次に、あなたの見解では、これを行うだけです：

{{{ content ? content.content.rendered : null }}}
于 2016-06-10T02:24:23.650 に答える
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 に答える