[Vuejs]-Get data from database and display to vue

by

0👍

✅

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>

0👍

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>
        <a href="#" class="btn btn-warning">Show </a>
      </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

Leave a comment