Question

我正在使用Laravel 5.6并创建模型命名进程和一个带有获取模型所有记录的函数的控制器：

public function showProcessList(){
    return response()->json(Process::all());
}

在web.php路由文件中还定义了检索记录的路由，它运行良好，我测试了端点，我可以看到数据：

Route::get('process/list', 'ProcessController@showProcessList');

在刀片文件中，我尝试显示创建Vue组件的列表，如下所示：

<!-- Process List -->
<div class="row">
<process></process>
</div>
<script src='{{ asset("public/js/app.js") }}'></script>

文件app.js有：

window.Vue = require('vue');

/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/

Vue.component('process', require('./components/Process.vue'));

const app = new Vue({
    el: '#app'
});

components / Process.vue包含：

<template>     
   <div class="tile mb-4 col-md-6 col-lg-12" id="listProcess">
       <div class="page-header">
            <h3 class="mb-4 line-head">Process List</h3>
       </div>
       <div v-for="process in processList">
           <p>{{ process.name }}</p>
       </div>
    </div>
</template>

<script>
    import axios from 'axios';

    export default {
        data () {
            return {
                processList: [],
            }
        },

    created() {
       this.showProcessList();
    },

    methods: {
        showProcessList () {
            axios.get('/process/list')
            .then(response => {
               this.processList = response.body;
             });

        }
    },
 }
</script>

然后执行npm run dev并在Web浏览器中加载调用Vue组件的视图：

<div class="row">
    <process></process>
</div>
<script src='{{ asset("public/js/app.js") }}'></script>

（我必须将公共文件夹添加到css和js文件的路径中）

没有任何反应，数据不会在视图中加载，我在控制台中看不到任何错误。

测试端点的结果是：

[
  {
    "id": 1,
    "created_at": "2018-03-28 04:33:02",
    "updated_at": "2018-03-28 04:33:02",
    "name": "first_process",
  },
]

所以，在这一点上我无法看到我的代码中的错误在哪里或我错过了什么？

感谢。

带有Vue组件的Laravel刀片未显示数据

0 个答案: