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

Question

我无法立即看到已成功输入数据库的数据。我在 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>我想立即查看数据而不更改页面或重新加载组件。

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