laravel - vuejs 和 laravel 中的数据表数据未在移动设备上显示

Question

我正在使用 laravel 和 vuejs 我用 dataTable 显示数据，在移动版本中它不显示 api 数据，问题出在未显示的移动版本中，如果显示数据，则在桌面版本中，编辑按钮也不会在移动版本中打开。我已经尝试从互联网链接一个 api，如果它向我显示数据。

控制器：

<?php

namespace App\Http\Controllers\Admin;

use Illuminate\Http\Request;
use Illuminate\Validation\Rule;
use App\Models\Admin\Dependence;
use App\Http\Controllers\Controller;
use App\Http\Controllers\ResponseApiController;

class DependenceController extends ResponseApiController
{
    
    public function getDependencies()
    {
        
        $dependencies = Dependence::orderBy('created_at', 'desc')->get();
        
        $message = $this->sendResponse($dependencies, 'Dependencias listadas correctamente');

        return $message;
    }     
       
}

路线：

Route::get('dependencies', 'Admin\DependenceController@getDependencies');

Vue - 全局文件中的库：

//DataTables
import 'datatables.net-bs4';
import 'datatables.net/js/jquery.dataTables.min.js';
import 'datatables.net-bs4/css/dataTables.bootstrap4.min.css';
import 'datatables.net-bs4/js/dataTables.bootstrap4.min.js';
import 'datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css';
import 'datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js';

//DataTable Global
Vue.prototype.$tableGlobal = function(table) {
    this.$nextTick(() => {
        $(table).DataTable();
    });
}

模板：

<template>
<div class="container-fluid">

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <div class="row">
                        <div class="col-auto mr-auto">
                            <h2 class="text-secondary">Dependencies List</h2>
                        </div>
                        <div class="col-auto">
                            <button class="right btn btn-primary btn-sm" v-b-modal.modal-1 @click="showModal = true">Add</button>
                        </div>
                    </div>
                </div>
                <!-- /.card-header -->
                <div class="card-body animated fadeIn">
                    <table id="tblDependencies" class="table table-bordered table-hover dt-responsive">
                        <thead>
                            <tr>
                                <th>Description</th>                                                                    
                                <th>Options</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="dependence in dependencies" :key="dependence.id">
                                <td>{{ dependence.description }}</td>
                                <td>                                   

                                     <!-- Change Status  -->
                                    <b-button size="sm"  @click="statusUpdate(dependence)" class="mr-1" :class="[dependence.status == 1  ? 'btn-success' : 'btn-danger']">
                                        <b-icon :icon="dependence.status == 1 ? 'check' : 'x' "></b-icon> 
                                    </b-button>
                                     
                                     <!-- Edit -->
                                     <b-button v-b-modal.editDependence size="sm" @click="editDependence(dependence)" class="btn btn-warning">                                            
                                        <b-icon icon="pencil-fill"></b-icon>
                                     </b-button>
                                     
                                </td>                                  
                            </tr>
                        </tbody>
                    </table>
                </div>
                <!-- /.card-body -->
            </div>
            <!-- /.card -->
        </div>
        <!-- /.col -->
    </div>


<AddDependence ref="dependenceModal" @reload="getDependencies"></AddDependence>


<EditDependence ref="editModal" :editDependence="this.dataEditDependence" @reload="getDependencies"></EditDependence>

</div>

</template>


<script>

// Services
import * as dependenceService from '../../services/dependence';

// Components
import AddDependence from '../../components/Admin/Dependence/AddDependence.vue';    
import EditDependence from '../../components/Admin/Dependence/EditDependence.vue'

export default {

    data() {
        return {
            dependencies: [],                
            dataEditDependence: {}               
        }
    },

    mounted() {            
        this.getDependencies();
    },

    components: {            
        AddDependence,           
        EditDependence
    },
    methods: {
                
        getDependencies: async function() {

            try {
               
                const response = await dependenceService.getDependencies();                               

                if(response.status == 200) {
                    this.dependencies = response.data.data;                        
                    this.reloadTable();              
                }

            } catch (error) {
                this.loading = false
                 console.log(error);
                if (error.response.status == 422){
                    console.log(error);
                }
            }
        },
        
        statusUpdate: async function(dependence) {
            
            try {

                const response = await dependenceService.activateDesactivate(dependence.id);

                if (response.status == 200) {
                    
                    if(response.data.data.status == 1) {
                        dependence.status = 1;
                    }else {
                        dependence.status = 0;
                    } 

                    this.$alerta('Actualizado', 'Estado actualizado correctamente', 'success');                        
                    this.reloadTable();  
                }

            } catch (error) {
                console.log(error);
            }                

        },

        editDependence(dependence) {
            this.dataEditDependence = dependence;               
        },
     
        reloadTable() {
           $('#tblDependencies').DataTable().destroy();
           this.$tableGlobal('#tblDependencies');
        },

    }
}

</script>

http_服务：

import store from '../store';
import axios from 'axios';

export function http() {
    return axios.create({
        baseURL: store.state.apiURL,
    });
}

服务：

import {http} from './http_service';

export function getDependencies() {
    return http().get('/dependencies');
}

标签： laravelvue.jsdatatable