Php 如何使用vue.js laravel在不刷新的情况下自动显示数据

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

我正在使用Laravel 5.8框架中的vue.js，以及axios和vue路由器工具

这是我在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>

添加新任务
特辛潘
{{error（errors.name）}
{{error（errors.duration）}
添加任务

//这是显示数据的部分

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

任务列表
纳马图加斯
杜拉西
迪坦巴坎帕达酒店
{{task.name}
{{task.duration}
{{task.created_at}}
检查
删除

//这是脚本部分

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

导出默认值{
数据（）{
返回{
成功：错，
任务：{}，
任务：[]，
错误：[]
};
},
创建（）{
让uri=`/api/tasks`；
this.axios.get（uri）.then（response=>{
this.tasks=response.data.data；
});
},
方法：{
addTask（）{
让uri=`/api/tasks`；
这是axios
.post（uri，this.task）
。然后（响应=>{
this.success=response.data.success；
})
.catch（错误=>{
if（error.response.status==422）{
this.errors=error.response.data.errors；
}
});
},
错误（字段）{
返回头（字段）；
},
删除任务（id）{
让uri=`/api/tasks/${id}`；
this.axios.delete（uri）.then（response=>{
this.success=response.data.success；
});
}
}
};

---

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

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

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

导出默认值{
数据（）{
返回{
成功：错，
任务：{}，
任务：[]，
错误：[]
};
},
创建（）{
this.fetchTasks（）
},
方法：{
fetchTasks（）{
让uri=`/api/tasks`；
this.axios.get（uri）.then（response=>{
this.tasks=response.data.data；
});
},
addTask（）{
让uri=`/api/tasks`；
这是axios
.post（uri，this.task）
。然后（响应=>{
this.success=response.data.success；
this.fetchTasks（）//您需要在此处再次调用api，以便在成功添加新任务后获取最新结果
})
.catch（错误=>{
if（error.response.status==422）{
this.errors=error.response.data.errors；
}
});
},
错误（字段）{
返回头（字段）；
},
删除任务（id）{
让uri=`/api/tasks/${id}`；
this.axios.delete（uri）.then（response=>{
this.success=response.data.success；
});
}
}
};