Data Fetching From Database Using Laravel And Vuejs

I am trying to fetching data from database using Laravel and Vue.js. Result I am getting is none. But firebug console shows the response. Please find the attached image. Please ch

Solution 1:

I have edited the controller part. Now I got result. Replace return response()->json(['messages' => $listCustomers]) with return $listCustomers.

publicfunctionshowCustomersData()
    {
        $listCustomers             = Customer::select('id', 'name', 'reference_id')
            ->orderBy('id', 'desc')
            ->get();
        return$listCustomers;
    }

Solution 2:

You may need to pre-initialise the messages variable in the Vue data object as per the warning message in your console. I think it depends on the version of VueJs you're using. Try:

newVue({
    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);
            });
        }
    }
});

Solution 3:

Here is an example using simulated ajax request to update grid data. Hopes to help you.

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

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

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.20/vue.min.js"></script><divid="app"><table><tr><th>Index</th><th>Title</th><th>Description</th><th>Action</th></tr><trv-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. The first warning tells you to change your code, it prefers

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

The second warning tells you to pre-init the variable messages in data. The last, sorry I don't know, haven't see it before.