在 v-for laravel-vue 中显示答案

【问题标题】：Display in v-for laravel-vue在 v-for laravel-vue 中显示
【发布时间】：2019-01-21 08:47:44
【问题描述】：

编辑：

我正在使用 Vue.js，但我遇到了我的对象 JSON 字符串未显示的问题。

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

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>

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

【问题讨论】：

你在使用数据表插件吗？
是的。其设置为 $masterIds = OBMaster::all();返回 $masterIds;
@ChinLeung bdw。我将 axios 路由更改为 /viewrequestsample 以及控制器。
@gil Uncaught TypeError: url.indexOf is not a function and CSRF token not found:
您的 Vue 开发工具中的 items 是否未定义？您可以省略 mounted: function mounted() 中的另一个第二个安装字，只需 mounted: function() 就可以了。

标签： laravel vue.js axios laravel-5.6

【解决方案1】：

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

像这样：

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

问题：您的插值标记是否正确定义为 @{{}}？

【讨论】：

说实话不是。我不知道我是否做得对。我只是按照教程做一个小实验。
在教程中是一样的。 @{{ item.id }} @{{ item.name }} @{{ item.年龄 }} @{{ item.profession }}
是的。那是正确的。我从我的数据库中填写表格中的内容
还是什么都没有，先生。如果我打开 localhost:8000/viewrequestsample/ .it 确实会查看对象字符串。但是当在 localhost:8000/viewrequestsample/ 中时，它不会在 v-for 中放置任何内容。
.先生。你的样品工作正常。但我的不是。我的路由或控制器有问题吗？