我从数据库中提取数据时,表未显示

时间:2019-01-23 13:33:05

标签: laravel vue.js

这是我的表格,可以显示数据库中的主题详细信息

<div class="card-body table-responsive p-0">
    <table class="table table-hover">
        <tbody>
            <tr>
                <th>ID</th>
                <th>Subject Code</th>
                <th>Subject Name</th>
                <th>Credit Hours</th>
                <th>Created_at</th>
                <th>Action</th>
            </tr>
            <tr v-for="subject in subjects" :key="subject.id">
                <td>{{ subject.id }}</td>
                <td>{{ subject.code | capitalize}}</td>
                <td>{{ subject.name }}</td>
                <td>{{subject.credit_hours}}</td>
                <td>{{ subject.created_at |datetime }}</td>
                <td>
                    <!-- Edit User -->
                    <a href="#" @click="editModal(subject)">
                        <i class="fa fa-edit text-green"></i>
                    </a> &nbsp;


                    <!-- Delete User -->
                    <a href="#" @click="deleteSubject(subject.id)">
                        <i class="fa fa-trash text-red"></i>
                    </a>
                </td>
            </tr>

这是我的vuejs代码,用于从subjectcontroller @ index获取数据

<script>


import { Form, HasError, AlertError } from 'vform'

export default {

    data () {
        return {

            editmode : false, 
            subjects: {}

            form: new Form({
                    id: '',
                    subject_code: '',
                    subject_name: '',
                    credit_hours: '',
                   })
                }
            },
          methods:{
             loadSubjects(){
                axios.get("api/subject")
                     .then( 
                        ({data})  => (this.subjects = data.data)
                      );
        }
     },
    created(){ 
        this.loadSubjects();
    }
}
</script>

这是subjectController @ index中的代码

public function index()
{
    $subjects = Subject::latest(); 
    return $subjects->get();
}

主题数据显示在控制台Network.XHR中,  没有控制台错误或警告

任何帮助将不胜感激

1 个答案:

答案 0 :(得分:0)

我最近遇到了同样的问题。在axios模块中,尝试以下操作:

axios
  .get("api/subject")
  .then(response => (this.subjects = response.data));