Question

当前代码使用vue.js对数据进行排序和过滤。它工作正常，但数据是虚拟的，它是硬编码的。我需要使用vue js和laravel从表中动态获取数据。如何在class Program { static void Main(string[] args) { var context = new EntityContext(); context.Files.Add(new File { Name = "File 1" }); context.Files.Add(new File { Name = "File 2" }); context.Files.Add(new File { Name = "File 3" }); context.Files.Add(new File { Name = "File 4" }); context.SaveChanges(); Console.WriteLine("Done"); Console.ReadLine(); } }中获取动态数据？

JS

gridData

laravel.blade.php

Vue.component('demo-grid', {
    template: '#grid-template',
    props: {
        data: Array,
        columns: Array,
        filterKey: String
    },
    data: function () {
        var sortOrders = {}
        this.columns.forEach(function (key) {
            sortOrders[key] = 1
        })
        return {
            sortKey: '',
            sortOrders: sortOrders
        }
    },
    methods: {
        sortBy: function (key) {
            this.sortKey = key
            this.sortOrders[key] = this.sortOrders[key] * -1
        }
    }
})

// bootstrap the demo
var demo = new Vue({
    el: '#app',
    data: {
        searchQuery: '',
        gridColumns: ['name', 'power'],
        gridData: [
            { name: 'Chuck Norris', power: Infinity },
            { name: 'Bruce Lee', power: 9000 },
            { name: 'Jackie Chan', power: 7000 },
            { name: 'Jet Li', power: 8000 }
        ]
    }
})

Answer 1

你需要做一些事情。

首先，在Laravel中，在routes.php文件中创建一个新路由，例如：

Route::get('/api/fighters', 'SomeController@index');

然后在你的控制器（somecontroller.php）中，你将有一个方法index，它将查询你的数据库表并将其作为JSON数据返回。

public function index() {
    //query your database any way you like. ex:
    $fighters  = Fighter::all();

    //assuming here that $fighters will be a collection or an array of fighters with their names and power
    //when you just return this, Laravel will automatically send it out as JSON.
    return $fighters;
}

现在，在Vue中，您可以调用此路由并获取数据。使用AJAX。您可以使用任何您喜欢的AJAX库，甚至是jQuery。我目前使用的是Superagent.js。 Vue可以和任何人一起使用。因此，在您的Vue代码中，创建一个新方法来获取数据。：

methods: {
    getDataFromLaravel: function() {
        //assign `this` to a new variable. we will use it to access vue's data properties and methods inside our ajax callback
        var self = this;
        //build your ajax call here. for example with superagent.js
        request.get('/api/fighters')
            .end(function(err,response) {
                if (response.ok) {
                   self.gridData = response.body;
                }
                else {
                   alert('Oh no! We have a problem!');
                }
            }
    }
}

然后您可以使用按钮或任何您喜欢的方式调用此新方法。例如，使用按钮单击事件：

  <button type="button" @click="getDataFromLaravel">Get Data</button>

或者您甚至可以使用Vue的就绪功能自动加载数据：

  // bootstrap the demo
  var demo = new Vue({
      el: '#app',
      data: { 
             .... }
      ready: function () {
            this.getDataFromLaravel();
      },
      methods: {
               .... }
  });

完成！现在，您已将数据库数据分配给Vue的数据属性gridData。

使用Laravel和VueJs对ajax数据进行排序和过滤

1 个答案: