Как передать данные из php в js с использованием библиотеки axios?

Question

[Nickita]

Добрый день! Помогите советом, пожалуйста.
Есть данные, которые приходят из php с помощью JSON
Данные обрабатываются библиотекой axios.

const app = new Vue(
    {
        el: '#app',
        data: 
            {
               corrs: []   
            },

            mounted: function(){
                this.getAllCorrs();
                
            },

            methods: {
                getAllCorrs() {
                    axios.get("http://url.local/api.php?action=read")
                    .then(response => {
                        app.corrs = response.data
                    })
                    
                    .catch(error => {
                        console.log('-----error-------');
                        console.log(error);
                      })
                
                    
                    
            }
    });

В метод getAllCorrs() они попадают, но в консоле отображаются всего 1 раз, потом консоль пустая.
А в html ничего тоже ничего не отображается( Вроде правильно все делаю, почему так?

<tr v-for="corr in corrs">
    <th>{{corr.id}}</th>
    <td>{{corr.name}}</td>
    <td>{{corr.fivest}}</td>
    <td>{{corr.comment}}</td>
</tr>

Всем спасибо! Проблема была на стороне php

Comments

[Максим Тимофеев]

но в консоле отображаются всего 1 раз

а сколько должны и где вывод в консоль, не вижу в коде его?

Выведите в консоль

mounted: function(){
                this.getAllCorrs();
                console.log(this.corrs);
            },

Что там?

[Nickita]

Максим Тимофеев, Пустой массив( Но данные же были!!! Почему сейчас не выводятся? Какая может быть причина?

[Nickita]

Про 1 раз я имел ввиду обновление браузера. Один раз обновил массив был с данными, 2 раз обновил - пусто

[Максим Тимофеев]

Nickita, смотрите запрос. Улетает не улетает и что прилетает, в консоле есть все данные.

Answer 1

[Дима Паутов]

Замените свой код на этот
this.corrs = response.data

P.S. И лучше запускать не в mounted, а в created хуке

Comments

[Nickita]

Заменил, но разницы нет (я уже по разному пробовал)..

[Дима Паутов]

Nickita, а вы уверены, что данные приходят вообще? Распечатайте результат после получения данных

[Nickita]

Дима Турков, вот в том-то и проблема, один раз обновил браузер, в консоле увидел пришедшие данные (в коде ничего не менял), обновил 2 раз и пусто... 3 и т. д результат тот же(

[Nickita]

Перехожу по ссылке 'url.local/api.php?action=read' данные есть

Answer 2

[Александр Шаповал]

main.js

import Vue from 'vue'
import App from './App'

const app = new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})

App.vue

<template>
  <div>
    <tr v-for="corr in corrs" :key="corr.id">
      <th>{{corr.id}}</th>
      <td>{{corr.name}}</td>
      <td>{{corr.fivest}}</td>
      <td>{{corr.comment}}</td>
    </tr>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data () {
    return {
      corrs: []
    }
  },
  created () {
    this.getAllCorrs()
  },
  methods: {
    getAllCorrs () {
      axios.get("http://url.local/api.php?action=read").then(response => {
        this.corrs = response.data
      }).catch(error => {
        console.log('-----error-------')
        console.log(error)
      })
    }
  }
}
</script>

index.html

<div id="app"></div>
 <script src="/js/my.js"></script>

Comments

[Nickita]

Все равно консоль пустая...совсем уже ничего не понимаю(

[Александр Шаповал]

Nickita, так в консоль тут ничего не выводится, оно должно появится в этой разметке

<tr v-for="corr in corrs">
    <th>{{corr.id}}</th>
    <td>{{corr.name}}</td>
    <td>{{corr.fivest}}</td>
    <td>{{corr.comment}}</td>
</tr>

[Nickita]

Александр Шаповал, я данные смотрел, что приходит в метод, массив пустой, поэтому они и в раметке не вывелись(

[Александр Шаповал]

Nickita, покажите скриншот данных приходящих в network
Network -> наш запрос -> Preview

[Nickita]

Александр Шаповал,

[Александр Шаповал]

Nickita, там где
this.corrs = response.data
пропиши
console.log(response)
поищи тамм свои данные, должны были быть в response.data
но так как их там нету, надо искать

[Nickita]

Александр Шаповал, в console. log(response) данные отображаются... хм полтергейст, тогда по какой причине они не попадают в массив?

[Александр Шаповал]

Nickita, в response.data данные?

[Александр Шаповал]

Nickita, обновил ответ

[Nickita]

Александр Шаповал, спасибо, но с webpack то же самое. Попробую не через php, а через express. Спасибо, что откликнулись!

Answer 3

[Александр]

проверьте контекст не потерялся ли у вас?

getAllCorrs() {
                     // добавляем 
                    const self = this;
                    axios.get("http://url.local/api.php?action=read")
                    .then(response => {
                        //app.corrs = response.data
                       // и здесь обращаемся не к this а к self
                          self.corrs = response.data
                    })

Comments

[Nickita]

Нет, так я тоже пробовал, приходит пустой массив(