以v-for laravel-vue显示

Question

编辑：

我使用的是Vue.js，我的对象JSON-string没有显示问题。

问题是对象字符串没有在v中显示。

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>

...........................................................................................................................

Answer 1

您的data必须是返回数据的函数。

如下所示：

data() {
    return {
        items:[]
    }
}

问:您的内插标签是否正确地定义为@{{}？