I have a component defined in vuejs .
Vue.component('persona-component',require('./components/personas/personaComponent.vue'));
Defined as follows:
<template>
<div class="container">
<div class="container-fluid"><!--container-fluid-->
<h1 class="page-header">Personas</h1>
<a href="#" class="btn btn-success pull-right" data-toggle="modal" data-target="#createPersona"><i class="fa fa-plus"></i> Nueva Persona</a>
<br>
<br>
<table class="table table-hover table-striped table-bordered" id="MyTable">
<thead>
<tr>
<td colspan="5">
<div class="form-inline" style="float: right;">
<input id="buscar" v-model="texto" type="text" class="form-control" placeholder="Escriba algo para filtrar" style="margin: 3px" />
<a id="btnBuscar" href="#" class="btn btn-primary btn-xs" v-on:click.prevent="findPersona(texto)" style="margin: 3px"><i class="fa fa-search"></i> Buscar</a>
<a id="btnActualizar" href="#" class="btn btn-primary btn-xs" v-on:click.prevent="getPersonas()" style="margin: 3px"><i class="fa fa-repeat"></i> Actualizar</a>
</div>
</td>
</tr>
<tr>
<th>DNI</th>
<th>Apellidos y Nombres</th>
<th colspan="2"><center>Acciones</center></th>
</tr>
</thead>
<tbody>
<tr v-for="persona in personas">
<td width="10px">{{ persona.PERS_varDNI}}</td>
<td>{{ persona.PERS_varApPaterno}} {{ persona.PERS_varApMaterno}}, {{ persona.PERS_varNombres}}</td>
<td width="10px">
<a href="#" class="btn btn-warning btn-sm" v-on:click.prevent="editPersona(persona)">Editar</a>
</td>
<td width="10px">
<a href="#" class="btn btn-danger btn-sm" v-on:click.prevent="deletePersonas(persona.PERS_varDNI)">Eliminar</a>
</td>
</tr>
</tbody>
</table>
<nav>
<ul class="pagination">
<li v-if="pagination.current_page > 1">
<a href="#" @click.prevent="changePage(pagination.current_page - 1)">
<span>Atras</span>
</a>
</li>
<li v-else>
<span disabled style="background-color: #dee2e6">Atras</span>
</li>
<li v-for="page in pagesNumber" v-bind:class="[ page == isActived ? 'active':'']">
<a href="#" @click.prevent="changePage(page)">
{{ page }}
</a>
</li>
<li v-if="pagination.current_page < pagination.last_page">
<a href="#" @click.prevent="changePage(pagination.current_page + 1)">
<span>Siguiente</span>
</a>
</li>
<li v-else>
<span disabled style="background-color: #dee2e6">Siguiente</span>
</li>
</ul>
</nav>
</div>
<!--<div class="col-sm-5">
<pre>
{{ $data }}
</pre>
</div>-->
@include('persona.createpersona')
@include('persona.editPersona')
</div>
</template>
<script>
export default{
//
created: function(){
this.getPersonas();
},
data:function(){
return{
personas:[],
texto:'',
pagination:{
'total' : 0,
'current_page' : 0,
'per_page' : 0,
'last_page' : 0,
'from' : 0,
'to' : 0
},
newPersona:{PERS_varDNI: '', PERS_varApPaterno: '', PERS_varApMaterno: '', PERS_varNombres: ''},
fillPersona:{PERS_varDNI: '', PERS_varApPaterno: '', PERS_varApMaterno: '', PERS_varNombres: ''},
errors:[],
offset: 2,
}
},
computed:{
isActived: function(){
return this.pagination.current_page;
},
pagesNumber: function(){
if (!this.pagination.to) {
return [];
}
var from=this.pagination.current_page - this.offset;//pendiente(offset) TODO
if (from<1) {
from=1;
}
var to=from+(this.offset*2);//TODO
if (to>=this.pagination.last_page) {
to=this.pagination.last_page;
}
var pageArray=[];
while(from<=to){
pageArray.push(from);
from++;
}
return pageArray;
}
},
methods:{
getPersonas:function(page){
var urlPersona='personas?page='+page;
axios.get(urlPersona).then(response=>{
this.texto='';
this.personas=response.data.personas.data;
this.pagination=response.data.pagination;
});
},
deletePersonas:function(dni){
var url = 'personas/'+dni;
axios.delete(url).then(response=>{//eliminamos
this.getPersonas(); //listamos
toastr.success('Eliminado correctamente, DNI:'+dni);//manda mensaje
});
},
createPersona: function(){
var url='personas';
var persona=this.newPersona;
axios.post(url,persona).then(response=>{
this.getPersonas();
this.newPersona={PERS_varDNI: '', PERS_varApPaterno: '', PERS_varApMaterno: '', PERS_varNombres: ''},
this.errors=[];
$('#createPersona').modal('hide');
toastr.success('Nueva persona creada con exíto');
}).catch(error=>{
this.errors=error.response.data
});
},
editPersona: function(persona){
this.fillPersona.PERS_varDNI=persona.PERS_varDNI;
this.fillPersona.PERS_varApPaterno=persona.PERS_varApPaterno;
this.fillPersona.PERS_varApMaterno=persona.PERS_varApMaterno;
this.fillPersona.PERS_varNombres=persona.PERS_varNombres;
this.errors=[];
$('#editPersona').modal('show');
},
updatePersona: function(id){
var url='personas/'+id;
axios.put(url, this.fillPersona).then(response=>{
this.getPersonas();
this.fillPersona={PERS_varDNI: '', PERS_varApPaterno: '', PERS_varApMaterno: '', PERS_varNombres: ''};
this.errors=[];
$('#editPersona').modal('hide');
toastr.success('Actualización de datos exitosa');
}).catch(error=>{
this.errors=error.response.data
});
},
changePage: function(page){
this.pagination.current_page = page;
this.getPersonas(page);
},
findPersona: function(text){
var url='buscador/'+text;
axios.get(url).then(response=>{
this.personas=response.data.personas.data,
this.pagination=response.data.pagination
});
}
}
}
</script>
What I need is that when you call the function editPersona() a modal opens:
$('#editPersona').modal('show');
Before I used this because I defined the view in views and only put:
@include('persona.createpersona')
@include('persona.editPersona')
And I could call it, now that I turned it into a component, I do not know how to call it, since I have to send the data in fillPersona and make the changes with that. In some cases I saw that they create another component for the modal; If so, how do I pass the data from one component to another?