从数据库中获取数据并显示到vue

Question

如何从数据库中循环数据我在 laravel 中的路线是 Route::get('api/contacts', [ContactController::class, 'index'])->name('contact.index');我试图显示所有列表，但我与这里专家的 js 代码混淆，请帮助我

类 ContactController 扩展控制器 { /** * 显示资源列表。 * * @return \Illuminate\Http\Response */ 公共函数索引（） { $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>

Answer 1

你应该在 vuejs 实例中为你的联系人设置一个变量 喜欢contacts : [] 当您使用 axios 将控制器中的数据返回给 vuejs 时，您必须设置对该变量的响应：

 .then(response => {
        this.contacts = response.data;
        }
      )

然后在您希望显示数据的任何位置：

 <tr v-for="item in this.contacts">
     <td>@{{item .name}}</td>
     <td>@{{item .subject}}</td>           
</tr>

Answer 2

第 1 步： 从 rest api 加载 data

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;
        });
    },
}

第二步：将contact列表显示为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>

第 3 步：实现了在 html 模板中编辑或添加新联系人

<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>

第 4 步： 在 script 内添加编辑、删除和创建新联系人 methods

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

有关 Vue、Vuex、表单验证、路由器、CRUD 操作、表格排序、过滤的更多详细信息，请参阅以下项目链接 Complete Vue project with most of the features