Vue.js 和 Laravel 没有使用 axios 刷新页面

Question

大家好，我是 vue.js 的新手，我很困惑是否可以重新加载数据表（服务器端渲染）而不使用嵌入到 Blade.php 中的组件刷新页面？

这是我的代码。所有这些组件都附加在一个 Blade.php 文件中。

Department.vue 组件（用于添加）

    <template>
      <div class="container">
        <div class="row justify-content-center">
          <div class="col-md-8">
            <div class="card">
              <div class="card-header">Add Department / Section</div>
              <div class="card-body">
                <form @submit.prevent="addData()">

                <div class="form-group">
                  <label class="form-control-label" for="name">Department</label>
                  <input type="text" class="form-control" v-model="department">
                  <div v-if="errors.department" :class="['invalid-feedback']">{{ errors.department[0] }}</div>
                </div>

                <div class="form-group">
                  <label class="form-control-label" for="name">Section</label>
                  <input type="text" class="form-control" v-model="section" v-bind:class="{'is-invalid': validate && attemptSubmit && missingName }">
                  <div v-if="errors.section" :class="['invalid-feedback']">{{ errors.section[0] }}</div>
                </div>

                <button type="submit" class="btn btn-primary btn-block">Submit</button>
                <button class="btn btn-primary btn-block">Edit</button>
                </form>
                <strong>Output:</strong>
                <pre>
                {{output}}
                </pre>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>

<script>
  export default {
    mounted() {
      axios.get('/api/departments')
      .then(response => this.rows = response.data)
      .catch(error => console.log(error))
        },
    data() {
      return {
        department: '',
        section: '',
        output: '',
        attemptSubmit: false,
        validate: false,
        errors: [],
      };
    },
    computed: {
      missingName() {
        return this.section === ''
      },
    },
    methods: {
      addData() {
        this.attemptSubmit = true;
        this.validate = true;
        this.errors = [];
        if (this.errors) event.preventDefault();

        axios
        .post('/api/department', {
                    department: this.department,
                    section: this.section
        })
        .then(response => {
          this.validate = false;
          this.department = '';
          this.section = '';
          this.errors = '';
          this.output = response.data;
        })
        .catch(error => this.errors = error.response.data.errors)
      },
      deleteData(id) {
        if(confirm('Are you sure?')) {
          axios
          .delete(`/api/department/${id}`)
          .then(response => {this.output = response.data;})
          .catch(error => console.log(error))
        }
      }
    }
  }
</script>

Project.vue 组件（数据表）

<template>
  <div class="projects">
    <div class="tableFilters">
      <input class="input" type="text" v-model="tableData.search" placeholder="Search Table"
           @input="getProjects()">

      <div class="control">
        <div class="select">
          <select v-model="tableData.length" @change="getProjects()">
            <option v-for="(records, index) in perPage" :key="index" :value="records">{{records}}</option>
          </select>
        </div>
      </div>
    </div>
    <datatable :columns="columns" :sortKey="sortKey" :sortOrders="sortOrders" @sort="sortBy">
      <tbody>
        <tr v-for="project in projects" :key="project.id">
          <td>{{project.id}}</td>
          <td>{{project.department_name}}</td>
          <td>{{project.created_at}}</td>
                    <td> <a href="" @click="deleteData(project.id)"><i class="fas fa-trash" ></i></a></td>
        </tr>
      </tbody>
    </datatable>
    <pagination :pagination="pagination"
          @prev="getProjects(pagination.prevPageUrl)"
          @next="getProjects(pagination.nextPageUrl)">
    </pagination>
  </div>
</template>

<script>
import Datatable from './Datatable.vue';
import Pagination from './Pagination.vue';
export default {
  components: { datatable: Datatable, pagination: Pagination },
  created() {
    this.getProjects();
  },
  data() {
    let sortOrders = {};

    let columns = [
      {width: '33%', label: 'Deadline', name: 'id' },
      {width: '33%', label: 'Budget', name: 'department_name'},
      {width: '33%', label: 'Status', name: 'created_at'}
    ];

    columns.forEach((column) => {
       sortOrders[column.name] = -1;
    });
    return {
      projects: [],
      columns: columns,
      sortKey: 'id',
      sortOrders: sortOrders,
      perPage: ['5', '20', '30'],
      tableData: {
        draw: 0,
        length: 5,
        search: '',
        column: 0,
        dir: 'desc',
      },
      pagination: {
        lastPage: '',
        currentPage: '',
        total: '',
        lastPageUrl: '',
        nextPageUrl: '',
        prevPageUrl: '',
        from: '',
        to: ''
      },
    }
  },
  methods: {
    getProjects(url = '/api/departments') {
      this.tableData.draw++;
      axios
        .get(url, {params: this.tableData})
        .then(response => {
          let data = response.data;
          if (this.tableData.draw == data.draw) {
            this.projects = data.data.data;
            this.configPagination(data.data);
          }
        })
        .catch(errors => {
          console.log(errors);
        });
    },
    configPagination(data) {
      this.pagination.lastPage = data.last_page;
      this.pagination.currentPage = data.current_page;
      this.pagination.total = data.total;
      this.pagination.lastPageUrl = data.last_page_url;
      this.pagination.nextPageUrl = data.next_page_url;
      this.pagination.prevPageUrl = data.prev_page_url;
      this.pagination.from = data.from;
      this.pagination.to = data.to;
    },
    sortBy(key) {
      this.sortKey = key;
      this.sortOrders[key] = this.sortOrders[key] * -1;
      this.tableData.column = this.getIndex(this.columns, 'name', key);
      this.tableData.dir = this.sortOrders[key] === 1 ? 'asc' : 'desc';
      this.getProjects();
    },
    getIndex(array, key, value) {
      return array.findIndex(i => i[key] == value)
        },
         deleteData(id) {
        if(confirm('Are you sure?')) {
          axios.delete(`/api/department/${id}`)
          .then(response => {
            this.output = response.data;
            this.$parent.reload();
          })
          .catch(error => console.log(error))
                }
         }
  }
};
</script>

Answer 1

如果你想使用 laravel 路由，那么当你改变路由时它会刷新。创建 SPA 的方法很少。

1. 使用单独的 vuejs 项目
2. 您可以使用https://inertiajs.com/
3. 你可以使用 laravel livewire。 Livewire

我更喜欢在你的情况下使用惯性js/livewire，它可以很容易地与laravel和vuejs集成。