帶有 Vue.js 的 WordPress REST API - 顯示 ajax 響應，數組未更新

Question

我正在學習 VueJS。 我需要為 WordPress 自定義 AJAX 主題設置一個 Vue 實例。 我有這個代碼，我認為沒問題。 我想呈現 WordPress 網站的頁面，然后如果用戶單擊，則加載內容。

我使用 bootstrap 4 作為我的前端框架

<div class="container-fluid content-wrapper">
  <div class="row" id="app">
<!-- Sidebar Top Area -->
    <div class="col-sm-12 col-md-4 col-lg-5" id="navPanel">
<!-- Lista pagine -->
      <h1 class="home-claim" v-bind:title="pagename" v-for="page in pagenames" >
        {{ page.title.rendered }}
      </h1>
    </div>
    <div class="col-sm-12 col-md-8 col-lg-7" id="contentPanel">
<!-- contenuto pagine -->
    </div>
<!-- Sidebar Bottom Area -->
  </div>
</div>

  var app = new Vue({
    el: '#app',
    data: {
      pagenames: []
    },
    mounted() {
      var self = this;
      var url = 'wp-json/wp/v2/pages';
      $.getJSON( url, function(data){
          self.pagenames = data.title.rendered;
          console.log(data.title.rendered);
        //console.log(data);
      });
    }
  });

我無法顯示頁面列表。 怎么了？

Answer 1

在 ajax 響應之后，您將data.title.rendered字符串分配給之前定義為空數組的組件屬性pagenames 。 假設來自響應的data返回一組頁面/帖子，您應該分配完整數據：

 var app = new Vue({
    el: '#app',
    data: {
      pagenames: []
    },
    mounted() {
      var self = this;
      var url = 'wp-json/wp/v2/pages';
      $.getJSON( url, function(data){
          self.pagenames = data;
      });
    }
  });