Laravel - Vue js 應用程序未正確顯示數據

Question

使用 Vue js 和 Laravel REST API。 數據庫是mysql。 但是當嘗試顯示 ContactList 它沒有顯示在這里.. web.php

Route::prefix('api')->group(function() {
    //get contact
    Route::get('getContacts','ContactController@getContacts');
});

聯系人控制器.php

class ContactController extends Controller
{
    public function getContacts() {
        $contacts = Contact::all();
        return $contacts;
    }
}

聯系人列表.vue

  <tbody v-for="contact in contacts" :key="contact.id">
                <tr>
                    <th scope="row">{{ contact.id}}</th>
                    <td>{{ contact.name}}</td>
                    <td>{{ contact.email}}</td>
                    <td>{{ contact.designation}}</td>
                    <td>{{ contact.contact_no}}</td>
                    <td><button class="btn btn-danger btn-sm">Delete</button></td>

                </tr>
            </tbody>

        </table>
    </div>
</template>

<script>
export default {
    name:'Contact',
    created() {
        this.loadData();

    },
    methods: {
        loadData() {
            let url = this.url + '/api/getContacts';
            this.axios.get(url).then(response => {
                this.contacts = response.data
                console.log(this.contacts);
            });
        
        
        },
        mounted() {
            console.log('Contact List Component Mounted');
        },
        data() {
            return {
                url: document.head.querySelector('meta[name="url"]').content,
                contacts:[]
            }
        }
    }
}
</script>

控制台顯示以下錯誤 **[Vue 警告]：屬性或方法“聯系人”未在實例上定義，但在渲染期間被引用。 通過初始化該屬性，確保該屬性是反應性的，無論是在數據選項中，還是對於基於類的組件。 請參閱： https ://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties。

在發現

---> 在資源/js/components/ContactList.vue **

Answer 1

在 Laravel 端以正確的格式發送響應

 $contacts = Contact::all();
    
 $data['contacts'] =  $contacts;

 return response()->json(['status' => true, 'message' => 'Contacts collected', 'data' => $data]);

Vue.js 端

let url = this.url + '/api/getContacts';
  this.axios.get(url).then(response => {
  this.contacts = response.data.data.contacts
 });