如何使用vuetify和laravel呈现数据表?

时间:2018-11-11 23:09:15

标签: laravel datatable vuetify.js

我正在尝试快速,轻松地建立一个数据表,但这是行不通的。

我正在使用Vuetify和Laravel。

我已经构建了一个LocationController:

public function index()
{
    //
    $locations = \App\Location::all();
    $locations->toJson();
    return view('locations.index', [
        'locations' => $locations
]);
}

在我的Blade文件中,我想获取以下数据:

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Locations</div>
                             <datatable :laravel='{{ $locations }}'></datatable>
                <div class="card-body">

                </div>
            </div>
        </div>
    </div>
</div>
@endsection

然后在我的Datatable.vue组件中吐出来:

<template>
  <v-data-table
    :headers="headers"
    :items = "locations"
    :laravel = "laravel"
    class="elevation-1"
  >
    <template slot="items" slot-scope="props">
      <td>{{ props.item.name }}</td>
      <td class="text-xs-right">{{ props.item.city }}</td>
    </template>
  </v-data-table>
</template>

<script>
  export default {
    data () {
      return {
        headers: [
          {
            text: 'Name',
            align: 'left',
            sortable: false,
            value: 'name'
          },
          { text: 'City', value: 'city' },
        ],

        locations: [],
        laravel: [],    

          mounted()
          {
            console.log(datatable);
            console.log(this.locations);
          },
      }
    }
  }
</script>

locations_table的迁移

    public function up()
{
    Schema::create('locations', function (Blueprint $table) {
        $table->increments('location_id');
        $table->string('name');
        $table->string('postal_code');
        $table->string('address');
        $table->string('house_number');
        $table->string('city');
        $table->string('phone');
        $table->string('mobile');
        $table->string('email');
        $table->string('website')->nullable();
        $table->timestamps();
    });
}

我无法找到如何将我的数据处理到该vuetify数据表中。有人可以帮我吗?

0 个答案:

没有答案