Get data from database and display to vue - database

Question

how to loop the data from database my route in laravel is Route::get('api/contacts', [ContactController::class, 'index'])->name('contact.index'); and im trying to display all the list but im confuse with the js code someone expert here and please help me
class ContactController extends Controller
{
/**
* Display a listing of the resource.
*
* #return \Illuminate\Http\Response
*/
public function index()
{
$contacts = Contact::all();
// return view('contacts.index', compact('contacts'));
return response()->json(compact('contacts'));
}
<script>
import axios from "axios";
export default {
data() {
return {
form: {
first_name: "",
last_name: "",
email: "",
city: "",
country: "",
job_title: "",
},
errorMessage: "",
user: "",
};
},
methods: {
processCreate() {
this.errorMessage = "";
axios
.post("/api/contacts/index")
.then((response) => {})
.catch((error) => {
this.errorMessage = error.response.data.message;
console.log("error", error.response);
});
console.log(response);
},
},
mounted() {
// console.log(this.form)
},
};
</script>
<template>
<div class="row">
<div class="col-sm-12">
<h1 class="display-3">Contacts</h1>
<table class="table table-striped">
<thead>
<tr>
<td>ID</td>
<td>Name</td>
<td>Email</td>
<td>Job Title</td>
<td>City</td>
<td>Country</td>
<td colspan="3">Actions</td>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>
Show
</td>
<td>
Edit
</td>
<td>
<form method="post" action="">
<button class="btn btn-danger" type="submit">Delete</button>
</form>
</td>
</tr>
</tbody>
</table>
<div>
<router-link :to="{ name: 'contactsCreate' }">New Contact</router-link>
</div>
</div>
</div>
</template>

Answer 1

you should have a variable for your contacts in vuejs instance
like contacts : []
and when you return your data in controller with axios to vuejs, you have to set response to that variable:
.then(response => {
this.contacts = response.data;
}
)
and then wherever you want your data to be shown :
<tr v-for="item in this.contacts">
<td>#{{item .name}}</td>
<td>#{{item .subject}}</td>
</tr>

Answer 2

Step 1: Load data from rest api
methods: {
loadContactsFromAPI() {
var self = this;
return axios
.get("https://jsonplaceholder.typicode.com/users")
.then(function (response) {
self.contacts = response.data;
})
.catch(function (error) {
return error;
});
},
}
Step 2: Display the contact list to html template
<table class="table table-striped">
<thead>
<tr>
<td>ID</td>
<td>Name</td>
<td>Email</td>
<td>Job Title</td>
<td>City</td>
<td>Country</td>
<td colspan="3">Actions</td>
</tr>
</thead>
<tbody>
<tr :key="index" v-for="(contact, index) in contacts">
<td>{{ index + 1 }}</td>
<td>{{ contact.name }}</td>
<td>{{ contact.email }}</td>
<td>{{ contact.company.name }}</td>
<td>{{ contact.address.street }}</td>
<td>{{ contact.address.city }}</td>
<td>
Show
</td>
<td>
<a
href="#"
class="btn btn-primary"
#click.prevent="editContact(contact, index)"
>Edit</a
>
</td>
<td>
<button
class="btn btn-danger"
type="button"
#click="deleteContact(index)"
>
Delete
</button>
</td>
</tr>
</tbody>
</table>
Step 3: Implemented Edit or add new contact in html template
<div class="row" v-else-if="!showListContact">
<div>
<label>Name</label>
<input type="text" v-model="contact.name" />
</div>
<div>
<label>Email</label>
<input type="text" v-model="contact.email" />
</div>
<div>
<label>Job Title</label>
<input type="text" v-model="contact.company.name" />
</div>
<div>
<label>City</label>
<input type="text" v-model="contact.address.city" />
</div>
<div>
<button type="button" #click="saveContact">Save</button>
</div>
</div>
Step 4: Add Edit, Delete and Create new contact methods inside script
editContact(contact, index) {
this.showListContact = false;
this.selectedIndex = index;
this.contact = contact;
},
addNewContact() {
this.showListContact = false;
this.selectedIndex = "";
this.contact = {
company: {},
address: {},
};
},
saveContact() {
if (this.selectedIndex) {
this.contacts[this.selectedIndex] = this.contact;
} else {
this.contacts.push(this.contact);
}
// You have to make a call to backend api to save in db
this.showListContact = true;
},
deleteContact(index) {
if (confirm("Are you sure wants to delete the contact")) {
this.contacts.splice(index, 1);
// You have to make a call to backend api to delete in db
}
},
DEMO
For more details about Vue, Vuex, Form validations, Router, CRUD Operations, Table sorting, filtering refer the below project link
Complete Vue project with most of the features