javascript - WordPress REST API 与 Vue.js - 显示 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;
      });
    }
  });