这是全部代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="{asset('resources/js_css/Bootstrap.css')}" rel="stylesheet">
<title>Laravel</title>
</head>
<body>
<div id="app">
<div class="container">
<crud :fields="fields"></crud>
</div>
</div>
<template id="crud-template">
<table class="sortable table-bordered table-hover table-striped">
<thead>
<tr>
<th v-for="field in fields">@{ field.name}</th>
</tr>
</thead>
<tbody>
<tr v-for="doctor in list">
<td v-for="field in fields">@{doctor[field.name]}</td>
</tr>
</tbody>
</table>
</template>
</body>
<script src="{asset('resources/js_css/jQuery.js')}"></script>
{--<script src="{asset('resources/js_css/vue.js')}"></script>--}
<script src="//cdn.bootcss.com/vue/1.0.27/vue.js"></script>
<script src="{asset('resources/js_css/sorttable.js')}"></script>
<script src="{asset('resources/js_css/vue-resource.min.js')}"></script>
<script>
Vue.component('crud',{
template:'#crud-template',
props:['fields'],
data:function () {
return{
list:{}
}
},
created:function () {
var vm=this;
//通过vue-resource.js拿到数据
// vm.$http.get('api/doctor').then((response)=>{
// vm.list=response.data;
// })
//通过vue-resource.js拿到数据用它的resource来拿数据
var resource=this.$resource('api/doctor');
resource.get().then((response)=>{
vm.$set('list',response.data);
})
//通过jQuery.js拿到数据
// $.getJSON('api/doctor',function (data) {
// vm.list=data;
// })
}
})
</script>
<script>
new Vue({
el:'#app',
data:{
fields:[
{name:'id',isKey:true},
{name:'name'},
{name:'age'},
{name:'sex'},
{name:'phone'}
]
}
})
</script>
</html>