Fetch dữ liệu ra component (ok)
Last updated
Last updated
C:\xampp\htdocs\vl\resources\js\app.js
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
window.Vue = require('vue').default;
/**
* The following block of code may be used to automatically register your
* Vue components. It will recursively scan this directory for the Vue
* components and automatically register them with their "basename".
*
* Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
*/
// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
Vue.component('customers', require('./components/Customers.vue').default);
Vue.component('navbar', require('./components/Nav.vue').default);
Vue.component('foot', require('./components/Footer.vue').default);
/**
* 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.
*/
const app = new Vue({
el: '#app',
});C:\xampp\htdocs\vl\resources\views\welcome.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf" content="{{csrf_token()}}">
<script type="text/javascript">window.Laravel = {csrfToken: '{{csrf_token()}}'}</script>
<link rel="stylesheet" type="text/css" href="{{ url('public/css/app.css') }}">
<title>Laravel</title>
</head>
<body class="antialiased">
<div class="container relative flex items-top justify-center min-h-screen bg-gray-100 dark:bg-gray-900 sm:items-center py-4 sm:pt-0">
@if (Route::has('login'))
<div class="px-3 hidden fixed top-0 right-0 px-6 py-4 sm:block">
@auth
<a href="{{ url('/home') }}" class="text-sm text-gray-700 dark:text-gray-500 underline">Home</a>
@else
<a href="{{ route('login') }}" class="text-sm text-gray-700 dark:text-gray-500 underline">Log in</a>
@if (Route::has('register'))
<a href="{{ route('register') }}" class="ml-4 text-sm text-gray-700 dark:text-gray-500 underline">Register</a>
@endif
@endauth
</div>
@endif
<div id="app">
<navbar></navbar>
<customers></customers>
<!-- <foot></foot> -->
</div>
</div>
<script type="text/javascript" src="{{ url('public/js/app.js') }}"></script>
</body>
</html>C:\xampp\htdocs\vl\resources\js\components\Customers.vue
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-12 col-lg-12">
<div class="card">
<div class="card-header">Customer</div>
<div class="card-body pb-0" v-for="ctm in customers">
<p>Name: {{ctm.name_customer}}</p>
<p>Address: {{ctm.address_customer}}</p>
<p>City: {{ctm.city_customer}}</p>
<p>Email: {{ctm.email_customer}}</p>
<div>Phone: {{ctm.phone_customer}}</div>
<hr/>
</div>
</div>
</div>
</div>
</div>
</template>
<script type="text/javascript">
export default {
data(){
return {
customers: [],
customer: {
"name_customer": "",
"phone_customer": "",
"address_customer": "",
"email_customer": "",
"city_customer": ""
},
id_customer:"",
pagination: {},
edit: false,
}
},
mounted(){
fetch('api/customers')
.then(response => response.json()) // convert to json
.then(json => this.customers = json.data) //print data to console
.catch(err => console.log('Request Failed', err)); // Catch
}
}
</script>C:\xampp\htdocs\vl\resources\js\components\Nav.vue
<template>
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</template>
<script type="text/javascript">
export default {
}
</script>C:\xampp\htdocs\vl\resources\js\components\Footer.vue
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-12 col-lg-12">
<div class="card">
<p class="text-center">I'm an Footer.</p>
</div>
</div>
</div>
</div>
</template>
<script type="text/javascript">
export default {
}
</script>Kết quả:
