javascript - Unable to access the MySQL database 404 error found
Get the solution ↓↓↓I've been working on an address book using Laravel and vue. My views are working correctly but I keep getting 404 not found error when trying to access the data on the database. I've tried so many things but I'm missing something and I'm not sure what I'm doing wrong.
My contacts view:-
<template>
<div>
<h3 class="text-center">All contacts</h3><br/>
<table class="table table-bordered">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Phone</th>
<th>Birthday</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr v-for="contact in contacts" :key="contact.id">
<td>{{ contact.firstNamr }}</td>
<td>{{ contact.lastName }}</td>
<td>{{ contact.email }}</td>
<td>{{ contact.phone }}</td>
<td>{{ contact.birthday }}</td>
<td>
<div class="btn-group" role="group">
<router-link :to="{name: 'createAddress', params: { id: contact.id }}" class="btn btn-primary">createAddress
</router-link>
<router-link :to="{name: 'editContact', params: { id: contact.id }}" class="btn btn-primary">Edit
</router-link>
<button class="btn btn-danger" @click="deleteContact(contact.id)">Delete</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
data() {
return {
contacts: []
}
},
created() {
this.axios
.get('http://localhost:8000/api/contacts/')
.then(response => {
this.contacts = response.data;
});
},
methods: {
deleteContact(id) {
this.axios
.delete(`http://localhost:8000/api/deleteContact/${id}`)
.then(response => {
let i = this.contacts.map(item => item.id).indexOf(id); // find index of your object
this.contacts.splice(i, 1)
});
}
}
}
</script>
App.js
require('./bootstrap');
window.Vue = require('vue');
import App from './App.vue';
import VueRouter from 'vue-router';
import VueAxios from 'vue-axios';
import axios from 'axios';
import {routes} from './router';
Vue.use(VueRouter);
Vue.use(VueAxios, axios);
const router = new VueRouter({
mode: 'history',
routes: routes
});
const app = new Vue({
el: '#app',
router: router,
render: h => h(App),
});
Router.js
import Contacts from './contacts.vue';
import CreateContact from './createContact.vue';
import EditContact from './editContact.vue';
import Details from './details.vue';
export const routes = [
{
name: 'home',
path: '/',
component: Contacts
},
{
name: 'createContact',
path: '/createContact',
component: CreateContact
},
{
name: 'editContact',
path: '/editContact/:id',
component: EditContact
},
{
name: 'details',
path: '/details/:id',
component: Details
},
];
API.js
<?php
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
/*
|
web.php
{-code-5}
Contact Controler
{-code-6}
I've also been having issues seeding data. I can enter it using raw SQL code but I'm still not able to get the data from the database.
Answer
Answer
Share solution ↓
Additional Information:
Link To Answer People are also looking for solutions of the problem: trying to access array offset on value of type bool in
Didn't find the answer?
Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.
Similar questions
Find the answer in similar questions on our website.
Write quick answer
Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.