如何使用 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 {&nbsp; data() {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; success: false,&nbsp; &nbsp; &nbsp; task: {},&nbsp; &nbsp; &nbsp; tasks: [],&nbsp; &nbsp; &nbsp; errors: []&nbsp; &nbsp; };&nbsp; },&nbsp; created() {&nbsp; &nbsp; this.fetchTasks()&nbsp; },&nbsp; methods: {&nbsp; &nbsp; fetchTasks() {&nbsp; &nbsp; &nbsp; let uri = `/api/tasks`;&nbsp; &nbsp; &nbsp; this.axios.get(uri).then(response => {&nbsp; &nbsp; &nbsp; &nbsp; this.tasks = response.data.data;&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; },&nbsp; &nbsp; addTask() {&nbsp; &nbsp; &nbsp; let uri = `/api/tasks`;&nbsp; &nbsp; &nbsp; this.axios&nbsp; &nbsp; &nbsp; &nbsp; .post(uri, this.task)&nbsp; &nbsp; &nbsp; &nbsp; .then(response => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.success = response.data.success;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.fetchTasks()&nbsp; &nbsp;// you need to call your api again, here, to fetch the latest results after successfully adding a new task&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; .catch(error => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (error.response.status == 422) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.errors = error.response.data.errors;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; },&nbsp; &nbsp; error(field) {&nbsp; &nbsp; &nbsp; return _.head(field);&nbsp; &nbsp; },&nbsp; &nbsp; deleteTask(id) {&nbsp; &nbsp; &nbsp; let uri = `/api/tasks/${id}`;&nbsp; &nbsp; &nbsp; this.axios.delete(uri).then(response => {&nbsp; &nbsp; &nbsp; &nbsp; this.success = response.data.success;&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; }&nbsp; }};</script>