How to show data automatically without refresh with vue.js laravel

问题

I can't see immediately the data that I've succesfully input to database.

I'm using vue.js in Laravel 5.8 framework, with axios, and vue-router tools.

//This is my complete code in 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>

// this is the section for showing the data

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

// and this is the script section

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

I want to see the data immediately without changing page or component reload.

回答1:

I think you are missing fetching the data again after you input it. so you can do it like this:

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

来源：https://stackoverflow.com/questions/57916789/how-to-show-data-automatically-without-refresh-with-vue-js-laravel