WordPress REST API с Vue. js - отображать ajax ответ, массив не обновляется - PullRequest
Новая
       16

WordPress REST API с Vue. js - отображать ajax ответ, массив не обновляется

0 голосов
/ 11 февраля 2020

Я учусь VueJS. Мне нужно настроить экземпляр Vue для пользовательской темы AJAX WordPress. У меня есть этот код, который, я думаю, будет в порядке. Я хочу визуализировать страницы сайта 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);
      });
    }
  });

Я не могу отобразить список страниц. Что не так?

1 Ответ

2 голосов
/ 11 февраля 2020

После ответа 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;
      });
    }
  });
...