已编辑:
我正在使用Vue.js,但遇到了我的对象JSON字符串不显示的问题。
问题是对象字符串未在v-for中显示。
JS
var app = new Vue({
el: '#ob-rapper',
data:{
items:[],
},
mounted: function mounted(){
this.getVueItems();
},
methods:{
getVueItems: function getVueItems() {
var _this = this;
axios.get('/viewrequestsample').then(function (response) {
_this.items = response.data;
});
}
}
});
控制器:
public function viewRequestSample(){
$data = OBMaster::all();
return $data;
}
路线:
Route::get ( '/requestsample', function () {
return view ( 'Approvers.RequestSample' );
} );
Route::get('/viewrequestsample', 'AdminPagesController@viewRequestSample');
HTML:
<div class="card">
<div id="ob-rapper">
<div class="card-body">
<table class="table table-striped table-bordered bootstrap-datatable datatable responsive dataTable" id="DataTables_Table_0" aria-describedby="DataTables_Table_0_info">
<thead>
<tr role="row">
<th class="sorting" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Date registered: activate to sort column ascending" >
Name of Employee
</th>
<th class="sorting" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Role: activate to sort column ascending" >
Date Filed
</th>
<th class="sorting" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Status: activate to sort column ascending">
Status
</th>
<th class="sorting" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Actions: activate to sort column ascending">
Actions
</th>
</tr>
</thead>
{{ csrf_field() }}
<p class="text-center alert alert-success">Deleted Successfully!</p>
<tbody role="alert" aria-live="polite" aria-relevant="all">
<tr v-for="item in items">
<td>@{{ item.id }}</td>
<td>@{{ item.emp_id }}</td>
<td>@{{ item.date_filed }}</td>
<td>@{{ item.obdate}}</td>
<td>@{{ item.obfrom}}</td>
<td>@{{ item.obto}}</td>
<td>@{{ item.created_a}}</td>
<td>@{{ item.updated_at}}</td>
<td id="show-modal" class="btn btn-info" ><span
class="glyphicon glyphicon-pencil"></span></td>
<td id="show-modal" class="btn btn-danger"><span
class="glyphicon glyphicon-trash"></span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
............................................... ................................................... ................................................... ...........
答案 0 :(得分:0)
您的data
必须是返回数据的函数。
赞:
data() {
return {
items:[]
}
}
问题:您的插值标签是否正确定义为@ {{}}?