Estoy desarrollando un spa en vuejs y para mostrar los datos utilizo dataTables, tengo los botones de crear un nuevo registro, editar y ver la información y estoy realizando uso de modales, pero estoy presentando problemas en el modo responsive en dispositivos móviles no se me visualizan los datos y a la hora de abrir el modal de editar no me abre tampoco, solo abre el modal de crear.
Template:
<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">Lista de Usuarios</h2>
</div>
<div class="col-auto">
<button class="right btn btn-primary btn-sm" v-b-modal.modal-1 @click="showModal = true">Agregar</button>
</div>
</div>
</div>
<!-- /.card-header -->
<div class="card-body">
<table id="tblUser" class="table table-bordered table-hover dt-responsive">
<thead>
<tr>
<th>Usuario</th>
<th>Nombre</th>
<th>Email</th>
<th>Perfil</th>
<th>Estado</th>
<th>Opciones</th>
</tr>
</thead>
<tbody>
<tr v-for="(user, index) in users" :key="index">
<td>{{ user.username }}</td>
<td>{{ user.name }}</td>
<td>{{ user.email }}</td>
<td>{{ user.profile }}</td>
<td class="activate" v-if="user.deleted_at == null">Activado</td>
<td class="desactivate" v-else>Desactivado</td>
<td>
<button class="btn btn-info btn-sm">Detalle</button>
<button class="btn btn-warning btn-sm" v-b-modal.editUser @click="editUser(user)" >Editar</button>
</td>
</tr>
</tbody>
</table>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.col -->
</div>
<!-- Modal Para Agregar Usuarios -->
<AddUser ref="userModal" @reload="getUsers"></AddUser>
<!-- Modal Para Editar Usuarios -->
<EditUser ref="editModal" :editUser="this.dataEditUser" :statusUser="this.status" @reload="getUsers"></EditUser>
</div>
Script:
<script>
// Services
import * as userService from '../../services/user';
// Components
import AddUser from '../../components/Admin/AddUser.vue';
import EditUser from '../../components/Admin/EditUser.vue';
export default {
data() {
return {
users: [],
dataEditUser: {},
status: ''
}
},
mounted() {
this.getUsers();
},
components: {
AddUser,
EditUser
},
methods: {
dataTable() {
this.$nextTick(() => {
$('#tblUser').DataTable({
"ordering": false,
// "columnDefs": [
// { "width": "5%", "targets": 3 }
// ],
language: {
"sProcessing": "Procesando...",
"sLengthMenu": "Mostrar _MENU_ registros",
"sZeroRecords": "No se encontraron resultados",
"sEmptyTable": "Ningún dato disponible en esta tabla",
"sInfo": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
"sInfoEmpty": "Mostrando registros del 0 al 0 de un total de 0 registros",
"sInfoFiltered": "(filtrado de un total de _MAX_ registros)",
"sInfoPostFix": "",
"sSearch": "Buscar:",
"sUrl": "",
"sInfoThousands": ",",
"sLoadingRecords": "Cargando...",
"oPaginate": {
"sFirst": "Primero",
"sLast": "Último",
"sNext": "Siguiente",
"sPrevious": "Anterior"
},
"oAria": {
"sSortAscending": ": Activar para ordenar la columna de manera ascendente",
"sSortDescending": ": Activar para ordenar la columna de manera descendente"
}
},
});
});
},
getUsers: async function() {
try {
const response = await userService.getUsers();
if(response.status == 200) {
this.users = response.data.data;
this.reloadTable();
}
} catch (error) {
console.log(error);
if (error.response.status == 422){
console.log(error);
}
}
},
editUser(user) {
this.dataEditUser = user;
if (user.deleted_at == null) {
this.status = 'Activado';
}else {
this.status = 'Desactivado';
}
},
reloadTable() {
$('#tblUser').DataTable().destroy();
this.dataTable();
},
makeToast(title, text, type) {
this.$bvToast.toast(text, {
title: title,
variant: type,
autoHideDelay: 4000,
appendToast: true,
solid: true
})
},
}
}
Librerias que tengo para dataTable:
//Bootstrap
require('./bootstrap');
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap-vue/dist/bootstrap-vue.css';
import { BootstrapVue, IconsPlugin } from 'bootstrap-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';
//Rutas
import router from './routes';
Vue.use(BootstrapVue);
const app = new Vue({
el: '#app',
store,
router,
});
He intentado cambiar de versión de dataTables y agregando la clase dt-responsive a la tabla pero no se me visualizan los datos en mobile.
Gracias