如何使用 vue.js laravel 自动显示数据而不刷新

Posted 2023-02-22

【中文标题】如何使用 vue.js laravel 自动显示数据而不刷新

【英文标题】：How to show data automatically without refresh with vue.js laravel

【发布时间】：2020-01-14 22:13:52

【问题描述】：

我无法立即看到已成功输入数据库的数据。

我在 Laravel 5.8 框架中使用 vue.js，带有 axios 和 vue-router 工具。

这是我在 addTaskComponent.vue 中的完整代码

<template>
  <div class="container-fluid">
    <h2 style="text-align:center">Add New Task</h2>
    <form @submit.prevent="addTask" style="text-align:center" class="justify-content-center">
      <div v-if="success" class="alert alert-success">Tersimpan</div>
      <div class="row justify-content-center">
        <div class="col-4">
          <input
            placeholder="Enter Task Name"
            type="text"
            class="form-control"
            required
            oninvalid="this.setCustomValidity('data tidak boleh kosong')"
            oninput="setCustomValidity('')"
            v-model="task.name"
          />
          <span class="text text-danger"> error(errors.name) </span>
        </div>
        <div class="col-4">
          <input
            placeholder="Enter Duration of Task (hour)"
            type="text"
            class="form-control"
            v-model="task.duration"
          />
          <span class="text text-danger"> error(errors.duration) </span>
        </div>
        <div class="col-auto">
          <button type="submit" class="btn btn-primary">Add Task</button>
        </div>
      </div>
    </form>

//这是显示数据的部分

    <h2 style="text-align:center">List of Task</h2>
    <table class="table table-hover">
      <thead>
        <tr>
          <th>Nama Tugas</th>
          <th>Durasi</th>
          <th>Ditambahkan Pada</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="task in tasks" :key="task.id">
          <td> task.name </td>
          <td> task.duration </td>
          <td> task.created_at </td>
          <td>
            <router-link :to="name: '', params:  id: task.id " class="btn btn-primary">Check</router-link>
            <button class="btn btn-danger" @click.prevent="deleteTask(task.id)">Delete</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

//这是脚本部分

<script>
export default 
  data() 
    return 
      success: false,
      task: ,
      tasks: [],
      errors: []
    ;
  ,

  created() 
    let uri = `/api/tasks`;
    this.axios.get(uri).then(response => 
      this.tasks = response.data.data;
    );
  ,
  methods: 
    addTask() 
      let uri = `/api/tasks`;
      this.axios
        .post(uri, this.task)
        .then(response => 
          this.success = response.data.success;
        )
        .catch(error => 
          if (error.response.status == 422) 
            this.errors = error.response.data.errors;
          
        );
    ,
    error(field) 
      return _.head(field);
    ,
    deleteTask(id) 
      let uri = `/api/tasks/$id`;
      this.axios.delete(uri).then(response => 
        this.success = response.data.success;
      );
    
  
;
</script>

我想在不更改页面或重新加载组件的情况下立即查看数据。

【参考方案1】：

我认为您在输入数据后错过了再次获取数据。 所以你可以这样做：

<script>
export default 
  data() 
    return 
      success: false,
      task: ,
      tasks: [],
      errors: []
    ;
  ,

  created() 
    this.fetchTasks()
  ,
  methods: 
    fetchTasks() 
      let uri = `/api/tasks`;
      this.axios.get(uri).then(response => 
        this.tasks = response.data.data;
      );
    ,
    addTask() 
      let uri = `/api/tasks`;
      this.axios
        .post(uri, this.task)
        .then(response => 
          this.success = response.data.success;
          this.fetchTasks()   // you need to call your api again, here, to fetch the latest results after successfully adding a new task
        )
        .catch(error => 
          if (error.response.status == 422) 
            this.errors = error.response.data.errors;
          
        );
    ,
    error(field) 
      return _.head(field);
    ,
    deleteTask(id) 
      let uri = `/api/tasks/$id`;
      this.axios.delete(uri).then(response => 
        this.success = response.data.success;
      );
    
  
;
</script>