WedX - журнал о программировании и компьютерных науках

вызов ajax с vuejs

Я пытаюсь получить данные из API/данных конечной точки, которые передают объект. Но когда я запускаю свое приложение, я ничего не вижу в своей консоли, а на вкладке сети я не вижу никакого запроса xhr. В консоли тоже нет предупреждений и ошибок. Я делаю что-то не так здесь? Я правильно проверил конечную точку и ее передачу данных из бэкэнда.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>FLashy</title>
    <link rel="stylesheet" href="https://localhost:8000/css/bootstrap.min.css" media="screen" title="no title">

  </head>
  <body>

    <div class="container">
        <div class="row">
          <div class="col-md-4 col-md-offset-4" id="app">
            <h3 class="Text center">Datas</h3>
             <p>
              @{{ datas }}
             </p>
          </div>
       </div>
    </div>

    <!-- scripts -->
    <script src="https://localhost:8000/js/jquery-2.2.4.min.js"></script>
    <script src="https://localhost:8000/js/bootstrap.min.js" charset="utf-8"></script>
    <script src="https://localhost:8000/js/vue.js" charset="utf-8"></script>
    <script src="https://localhost:8000/js/vue-resource.min.js" charset="utf-8"></script>

<script type="text/javascript">

  new Vue({
           el:  '#app',

         data: {

         },

      methods:{

      fetchData: function(){
          this.$http.get('api/data').then(function(response){

                // this.$set('datas', response.data);
                console.log(response);
          }, function(response){
              // error callback
          });
      },

          ready: function(){
            this.fetchData();
        }
      }
  });
</script>
  </body>
</html>

веб.php

Route::get('api/data', function(){
  $a = [];
  $a['id'] = 1;
  $a['message'] = 'Lorem ipsum dolor sit amet, consectetur';
  $a['status'] = 'Completed';
  return response()->json($a,200);
});

Ответы:


1

Ваш хук ready находится внутри обработчика methods: {}, но на самом деле должен быть снаружи:

methods: {
  fetchData: function () {
    // your AJAX here
  }
},
ready: function () {
  this.fetchData()
} 
30.09.2016
Новые материалы

Как проанализировать работу вашего классификатора?
Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..

Работа с цепями Маркова, часть 4 (Машинное обучение)
Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..

Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..

Использование машинного обучения и Python для классификации 1000 сезонов новичков MLB Hitter
Чему может научиться машина, глядя на сезоны новичков 1000 игроков MLB? Это то, что исследует это приложение. В этом процессе мы будем использовать неконтролируемое обучение, чтобы..

Учебные заметки: создание моего первого пакета Node.js
Это мои обучающие заметки, когда я научился создавать свой самый первый пакет Node.js, распространяемый через npm. Оглавление Глоссарий I. Новый пакет 1.1 советы по инициализации..

Забудьте о Matplotlib: улучшите визуализацию данных с помощью умопомрачительных функций Seaborn!
Примечание. Эта запись в блоге предполагает базовое знакомство с Python и концепциями анализа данных. Привет, энтузиасты данных! Добро пожаловать в мой блог, где я расскажу о невероятных..

ИИ в аэрокосмической отрасли
Каждый полет – это шаг вперед к великой мечте. Чтобы это происходило в их собственном темпе, необходима команда астронавтов для погони за космосом и команда технического обслуживания..


Для любых предложений по сайту: [email protected]