Daten abrufen aus der Datenbank mit laravel und vuejs

Ich bin versucht zu Holen von Daten von der Datenbank mit Laravel und Vue.js.
Ergebnis bekomme ich keine. Aber firebug-Konsole zeigt die Antwort. Finden Sie das angehängte Bild. Überprüfen Sie bitte mein code und korrigieren Sie mich. Daten abrufen aus der Datenbank mit laravel und vuejs

data.blade.php

@extends('layouts.app')

@section('title', 'Customers List')

@section('styles')
@endsection

@section('content')
    <div class="container">
        <div class="row">
            <div class="col-md-10 col-md-offset-1">
                <div class="panel panel-default">
                    <div class="panel-heading">Customers List</div>
                    <div class="panel-body">
                        <table class="table table-hover table-bordered" id="app">
                            <thead>
                            <tr>
                                <th>#</th>
                                <th>Name</th>
                                <th>Reference ID</th>
                                <th>Action</th>
                            </tr>
                            </thead>
                            <tbody>
                            <?php
                            $i=1;
                            ?>
                            <tr v-for="message in messages">
                                <td> {{ $i }} </td>
                                <td> @{{ message.name }} </td>
                                <td> @{{ message.reference_id }} </td>
                                <td><a href="/customers/list/process/" class="btn btn-primary btn-xs" role="button">Click Here</a></td>
                            </tr>
                            <?php $i++; ?>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script src="/js/vue.js"></script>
    <script src="/js/vue-resource.min.js"></script>
    <script src="/js/customers.js"></script>
@endsection

customers.js

new Vue({
    el: '#app',

    ready: function() {
      this.fetchMessages();
    },

    methods: {
        fetchMessages: function() {
            this.$http.get('/customers/list/data', function(messages) {
                alert(messages);
                this.$set('messages', messages);
            });
        }
    }
});

Controller

public function showCustomersData()
    {
        $listCustomers             = Customer::select('id', 'name', 'reference_id')
            ->orderBy('id', 'desc')
            ->get();
        return response()->json(['messages' => $listCustomers]);
    }

Route

Route::get('/customers/list/data', [
        'as' => 'customerListData', 'uses' => 'CustomerController@showCustomersData'
    ]);
InformationsquelleAutor sam sam | 2016-03-30
  1. 1

    Habe ich bearbeitet der controller Teil. Nun bekam ich das Ergebnis.
    Ersetzen return response()->json(['messages' => $listCustomers]) mit return $listCustomers.

    public function showCustomersData()
    {
        $listCustomers             = Customer::select('id', 'name', 'reference_id')
            ->orderBy('id', 'desc')
            ->get();
        return $listCustomers;
    }
    InformationsquelleAutor sam sam
  2. 0

    Können Sie brauchen, um pre-initialisieren Sie die variable Nachrichten in der Vue-Daten-Objekt als pro die Warnmeldung in Ihrer Konsole. Ich denke, es hängt von der version von VueJs, die Sie verwenden. Versuchen:

    new Vue({
    el: '#app',

    data: {
        messages: []
    },

    ready: function() {
      this.fetchMessages();
    },

    methods: {
        fetchMessages: function() {
            this.$http.get('/customers/list/data', function(messages) {
                alert(messages);
                this.$set('messages', messages);
            });
        }
    }
});
    • Noch Ergebnis none. Ich bin mit vue js version 1.0.20
    InformationsquelleAutor Steve O
  3. 0

    Hier ist ein Beispiel mit simulierten ajax-request update-raster-Daten. Hofft, Ihnen zu helfen.

    JS:

    var data = [{
  title: 'Test',
  description: 'This is a test.'
}, {
  title: '404Error',
  description: '404 Page not found.'
}];
new Vue({
  el: '#app',
  data: {
   messages: []
  },
  ready: function() {
   this.fetchMessages();
  },
  methods: {
   fetchMessages: function() {
     var self = this;
     //simulate the ajax request
     setTimeout(function(){
       self.messages = data;
     }, 1000);
   }
  }
});

    CSS:

    table {
  border: 1px solid #ccc;
  table-layout: fixed;
  border-collapse: separate;
}
table th, table td {
  border: 1px solid #ccc;  
}

    HTML:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.20/vue.min.js"></script>
<div id="app">
<table>
  <tr>
    <th>Index</th>
    <th>Title</th>
    <th>Description</th>
    <th>Action</th>
  </tr>
  <tr v-for="message in messages">
    <td>{{$index+1}}</td>
    <td>{{message.title}}</td>
    <td>{{message.description}}</td>
    <td><button>Click me</button></td>
  </tr>
</table>
</app>

    P. S.
    Die erste Warnung sagt, dass Sie den code ändern, ist es bevorzugt

    //GET request
this.$http({url: '/someUrl', method: 'GET'}).then(function (response) {
    //success callback
}, function (response) {
    //error callback
});

    Die zweite Warnung weist Sie auf pre-init die variable messages im data.

    Die Letzte, leider weiß ich nicht, habe es nicht sehen, bevor.

    InformationsquelleAutor Erguotou
Schreibe einen Kommentar