@Nickita_K
Учусь Web-разработке, тапками сильно не кидайте...

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

Добрый день! Помогите советом, пожалуйста.
Есть данные, которые приходят из 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
  • Вопрос задан
  • 396 просмотров
Пригласить эксперта
Ответы на вопрос 3
bootd
@bootd Куратор тега HTML
Гугли и ты откроешь врата знаний!
Замените свой код на этот
this.corrs = response.data

P.S. И лучше запускать не в mounted, а в created хуке
Ответ написан
sanek_os9
@sanek_os9
Работаю с Laravel, Vue, Vuetify, AWS Amazon, Linux
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>
Ответ написан
@alexmixaylov
проверьте контекст не потерялся ли у вас?
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
                    })
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы