Javascript 带Vue.js的WordPress REST API-显示ajax响应，未更新数组

我在学VueJS。我需要为WordPress自定义AJAX主题设置一个Vue实例。我有这个代码，我认为可以。我想呈现WordPress站点的页面，然后如果用户单击，加载内容

我使用Bootstrap4作为前端框架

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

---

我无法显示页面列表。出什么问题了？

在ajax响应之后，您将

data.title.rendered

字符串分配给组件的属性

页面名

以前定义为空数组。假设响应中的

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;
      });
    }
  });

---

ajax响应之后，将

data.title.rendered

string分配给组件的属性

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;
      });
    }
  });

---

在你的线程中没有问题在你的线程中没有问题如果我想将ajax调用绑定到单击事件，我可以使用相同的vue实例，代码将进入挂载函数？是的，用方法包装它。我想您需要使用一些偏移量，以避免每次调用都加载相同的帖子列表。好的，我将进行一些测试，我想使用帖子或页面ID在单击时呈现页面内容。谢谢。如果我想将ajax调用绑定到单击事件，我可以使用相同的vue实例，代码将进入挂载函数？是，用一个方法包装它。我想您需要使用一些偏移量，以避免每次调用都加载相同的帖子列表。好的，我将进行一些测试，我想使用帖子或页面ID在单击时呈现页面内容。谢谢。