Get data from database and display to vue

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

checkout github.com/Jebasuthan/vue_crud_bootstrap

Jebasuthan
– Jebasuthan

2021-04-14 06:29:35 +00:00
Commented Apr 14, 2021 at 6:29 — Jebasuthan
– Jebasuthan, Commented Apr 14, 2021 at 6:29
Have you tried my solution?

Jebasuthan
– Jebasuthan

2021-10-20 09:51:36 +00:00
Commented Oct 20, 2021 at 9:51 — Jebasuthan
– Jebasuthan, Commented Oct 20, 2021 at 9:51

milad hedayatpoor · Accepted Answer · 2021-04-14 05:26:58Z

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>

answered Apr 14, 2021 at 5:26

milad hedayatpoor

6444 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jebasuthan · Accepted Answer · 2021-04-14 06:41:39Z

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

Collectives™ on Stack Overflow

Get data from database and display to vue

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related