Блог

Главная - Вопросы по программированию - Как отобразить общее количество сообщений Wp rest api в Vuejs

Как отобразить общее количество сообщений Wp rest api в Vuejs

#javascript #vue.js #frontend #axios

#javascript #vue.js #интерфейс #axios

Вопрос:

Я новичок в Vuejs и пробую простую выборку WP Rest Api с помощью axios. Я пытаюсь получить общее количество сообщений и отобразить это число. Я знаю, как добиться этого с помощью jQuery:

  $.get( 'localhost/wp-json/wp/v2/posts', function( data, status, request ) 
   {
numPosts = request.getResponseHeader('x-wp-total');
 console.log( numPosts ); 
 });

Как это сделать с помощью axios? Я пытаюсь вот так.

    new Vue({
     el: '#app',
     data: {
     total: []
     },
  mounted() {
   axios.get("localhost/wp-json/wp/v2/posts")
   .then(response => {this.total = response.headers('x-wp-total').total})
 }
 });

И вывод:

   <div id="app">
       <p>
         {{total}}
      </p>

   </div>

Кто-нибудь может мне помочь с этим?

Комментарии:

1. Вы получаете какие-либо ошибки в вашей консоли?

2. Попробуйте this.total = response.headers['x-wp-total']

3. @DelenaMalan да, я получаю («Ошибка в смонтированном хуке: «Ошибка ссылки: ответ не определен»)

4. Получаете ли вы данные из службы, запущенной на вашем локальном хостинге? Если это так, попробуйте добавить http:// к своему URL, например axios.get("http://localhost/wp-json/wp/v2/posts") . Возможно, вам также потребуется добавить номер порта. Или, если localhost в вашем URL-адресе на самом деле является частью URL-адреса, попробуйте предварительно исправить это с помощью / , например .get("/localhost/wp-json/wp/v2/posts")

5. Я бы посоветовал регистрировать любые возможные ошибки с помощью .catch(error => console.log(ошибка.ответ.данные.ошибки)). Вы также должны добавить http: // или https: // к своему URL.