我正在使用 https://github.com/matfish2/vue-tables
和 Laravel。
这是 vue 代码:
Vue.use(VueTables.client, {
compileTemplates: true,
highlightMatches: true,
pagination: {
dropdown:true,
chunk:5
},
filterByColumn: true,
texts: {
filter: "Search:"
},
datepickerOptions: {
showDropdowns: true
}
});
new Vue({
el: "#people",
methods: {
deleteMe: function(id) {
alert("Delete " + id);
}
},
data: {
options: {
columns: ['created_at', 'name', 'profession', 'footage_date', 'type', 'link', 'note'],
dateColumns: ['footage_date'],
headings: {
created_at: 'Added',
name: 'Name',
profession: 'Profesion',
footage_date: 'Footage Date',
type: 'Type',
link: 'Link',
note: 'Note',
edit: 'Edit',
delete: 'Delete'
},
templates: {
edit: "<a href='#!/{id}/edit'><i class='glyphicon glyphicon-edit'></i></a>",
delete: "<a href='javascript:void(0);' @click='$parent.deleteMe({id})'><i class='glyphicon glyphicon-erase'></i></a>"
},
},
tableData: [{ InsertDataHere }],
}
});
如何从 DB for tableData 获取数据? Vue 资源?
我有一条路线 /api/footage
,它为我提供了以下内容
[
{
"id": 2,
"user_id": 11,
"profession": "profession",
"type": "GvG",
"footage_date": {
"date": "2016-04-01 00:00:00.000000",
"timezone_type": 2,
"timezone": "GMT"
},
"link": "some link",
"note": "description",
"created_at": "1 hour ago",
"updated_at": "2016-04-03 23:06:32"
}
]
现在,用户和素材具有一对多关系。我将如何向用户展示每个条目? (也是编辑和删除的ID)
这是 Blade 代码
<div id="people" class="container">
<v-client-table :data="tableData" :options="options"></v-client-table>
</div>
提前谢谢。
最佳答案
您可以添加一个 ready()
函数来在构建组件时调用 API:
ready:function(){
this.$http.get('/api/footage')
.then(function(response){
this.tableData = response.data
}.bind(this))
}
您可能需要根据 API 响应的格式调整代码。如果您使用 es2016,则为更干净的版本:
ready(){
this.$http.get('/api/footage')
.then(({data})=>{
this.tableData = data
})
}
您应该在此之前包含 vue-resource
,是的。这允许您使用 this.$http
根据 @BillCriswell,您可以在 created()
函数中执行此操作,以更快地触发 API 调用
关于javascript - Vue.JS Vue-Tables Laravel 关系,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36393246/