Stack Overflow en español Asked by josanangel on January 28, 2021
tengo dos componentes, uno llamado : buscador y otro fichero-miniatura,
el buscador se encarga de de filtrar ficheros de forma asincrona segun lo que escriba en el buscador y cargarlos en su componente hijo fichero-miniatura.
Este buscador carga los resultados de forma dividida divididos por una paginación, es decir, si la busqueda da como resultado 10 ficheros, carga una paginación que muestra 3 de esos ficheros por pagina.
Cada fichero-miniatura tiene dos botones también, uno de borrado y otro de edición de nombre, el boton de cambiar nombre lo que hace es esconder el label y poner un input con dicho nombre para que el usuario ponga el nuevo nombre que desee, y abajo del input nuevo apareceran dos botones: ok (sy quieres confirmar el nuevo nombre) y Cancelar. Al guardar se queda el nuevo nombre sin problemas. Hasta aqui bien.
Recuerdan que dije que los resultados se dividian por paginación ? pues el problema comienza cuando pulso el boton de ir a otra pagina (ya sea boton de siguiente pagina o boton de ir a una pagina en concreto) . Al hacer eso,cuando quiera renombrar los ficheros que estaban en las otras paginas cargados con la misma busqueda me sale en la casilla de edición los nombre de los 3 ficheros de la primera pagina.
Por tanto si busco : ‘persona’ y obtengp 6 resultados (3 por página):
persona-1 persona-2 persona-3 persona-4 persona-5 persona-6
(pag-1) (pag-2)
Entonces si edito la persona-4 me saldra en el input la persona-1, al editar la persona-5 me saldrá la persona-2,etc…
Pero cuando le doy a borrar y me sale la confirmacion de OK (borrar) o Cancelar, y entonces, ahora si, le doy a editar si sale bien el nombre. ¿Será por algo que hace el boton eliminar? Mi sugerencia para arreglar esto la pondre abajo del todo para pediros apoyo para hacerlo
Componente Vue buscador:
<template>
<div>
<div class="container" >
<div class="row">
<div class="col-lg-12 col-md-12">
<div class="form-group" style="position:relative;">
<gif-loading style="position:absolute; right:0;bottom:3px;right:3px; " :show="labelButtonAdvancedSearching === 'Buscando ..' ? true : false"></gif-loading>
<input class="form-control" type="text" @keyup="buscar" placeholder="Nombre del archivo que deseas bucar.." v-model="fileNameToFind">
</div>
<div class="text-right my-2">
<!-- <button class="btn btn-primary">Hola</button> -->
<button class="btn" :class="[labelButtonAdvancedSearching === 'Buscando ..' ? 'btn-warning' : 'btn-secondary']" @click="busqAv = !busqAv">{{labelButtonAdvancedSearching}}</button>
</div>
<div class=" rounded bg-primary p-3 sombra" v-if="busqAv" style="position:absolute;z-index:3;width:100%;">
<div class="form-group border bg-secondary text-light p-3" id="orden">
<h5>Orden.</h5>
<hr>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="orden_created_at_desc" name="order_created_at" checked>
<label class="custom-control-label" for="orden_created_at_desc">Por creación (de mas nuevo a mas antiguo)</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="order_create_at_asc" name="order_created_at">
<label class="custom-control-label" for="order_create_at_asc">Por creacion (de mas antiguo a mas nuevo)</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="order_word_desc" name="order_word" checked>
<label class="custom-control-label" for="order_word_desc">Alfabeticamente (A-Z)</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="order_word_asc" name="order_word">
<label class="custom-control-label" for="order_word_asc">Alfabeticamente (Z-A)</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="defaultUnchecked">
<label class="custom-control-label" for="defaultUnchecked">Extension</label>
</div>
</div>
<div class="form-group border bg-secondary text-light p-3" id="tipo_archivo">
<h5>Tipo de archivo.</h5>
<hr>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="all_tipo" name="filtro_tipo" checked>
<label class="custom-control-label" for="all_tipo">Todos.</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="documento" name="filtro_tipo">
<label class="custom-control-label" for="documento">Documentos</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="imagen" name="filtro_tipo">
<label class="custom-control-label" for="imagen">Imagenes</label>
</div>
</div>
<div class="form-group border bg-secondary text-light p-3" id="tipo_extension">
<h5>Tipo de extensión.</h5>
<hr>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="all" name="filtro_extension">
<label class="custom-control-label" for="all">Todas.</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="png" name="filtro_extension">
<label class="custom-control-label" for="png">png</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="jpg" name="filtro_extension">
<label class="custom-control-label" for="jpg">jpg</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container" id="advanced_searching_result">
<div class="row">
<div class="col-lg-4 col-md-12 col-sm-12 my-2" v-for="(file,index) in foundFiles['data']" :key="file+index">
<fichero-miniatura :fichero_param="file" :root_dir="root_dir" ></fichero-miniatura>
</div>
</div>
</div>
<!-- Pagination -->
<div class="container">
<div class="row">
<div class="col-12">
<nav>
<ul class="pagination">
<li class="page-item" v-show="foundFiles['prev_page_url']">
<a href="#" class="page-link" @click.prevent="getPreviousPage">
<span>
<span aria-hidden="true">«</span>
</span>
</a>
</li>
<li class="page-item text-white" :class="{ 'active': (foundFiles['current_page']=== n) }" :key="n" v-for="n in foundFiles['last_page']">
<a href="#" class="page-link" @click.prevent="getPage(n)">
<span >
{{ n }}
</span>
</a>
</li>
<li class="page-item" v-show="foundFiles['next_page_url']">
<a href="#" class="page-link" @click.prevent="getNextPage">
<span>
<span aria-hidden="true">»</span>
</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props:['root_dir'],
data(){
return{
fileNameToFind:'',
busqAv:false,
foundFiles:[],
labelButtonAdvancedSearching:'Busqueda Avanzada',
currentPage:1
}
},
methods:{
buscar(){
console.log('Page : '+this.currentPage);
this.labelButtonAdvancedSearching = 'Buscando ..';
let that = this;
let data = new FormData();
data.append('file_name_to_find',this.fileNameToFind);
axios.post('/file/advanced_searching?page='+this.currentPage,data).then(
(response) => {
let data = response.data;
that.foundFiles = data.result;
that.labelButtonAdvancedSearching = 'Busqueda Avanzada';
console.log(that.foundFiles);
},
error=>{
console.log('Error al actualizar el nombre de la imagen');
that.labelButtonAdvancedSearching = 'Busqueda Avanzada';
}
)
},
getPage(page){
this.currentPage = page;
this.buscar();
},
getPreviousPage(){
this.currentPage--;
this.buscar();
},
getNextPage(){
this.currentPage++;
this.buscar();
},
},
}
</script>
Componente Vue fichero-miniatura:
<template>
<div class="card" style="width: 18rem;" title="">
<a id="imagen" :href="'/fichero/'+fichero_param.id" target="_blank">
<iconizador :fichero_param="fichero_param" :root_dir="root_dir" ></iconizador>
</a>
<div class="card-body">
<h6 v-if="!editableName" class="card-title" style="overflow-x: scroll; height:50px;">{{fichero_param.nombre_real}}</h6>
<input v-if="editableName" class="form-control-sm" v-model="newName" >
<!-- Renombrar - Borrar -->
<div id="botonera" v-if="!editableName && !deletableFile">
<button @click="editableName = true" class="btn btn-sm btn-warning">Renombrar</button>
<button @click="deletableFile = true" class="btn btn-sm btn-danger">Borrar</button>
</div>
<!-- OK - Cancelar -->
<div v-else class="mt-3">
<button @click="newName=fichero_param.nombre_real;renameOrDelete" class="btn btn-sm btn-success">OK</button>
<button @click="editableName = false; deletableFile = false; newName=fichero_param.nombre_real" class="btn btn-sm btn-danger">Cancelar</button>
</div>
</div>
</div>
</template>
<style scoped>
#imagen :hover{
box-shadow:'30px 1px 5px blue';
width:'80%';
transition:0.5s;
border-bottom-right-radius:30%;
border: red 10px;
}
</style>
<script>
export default {
props:
{
'fichero_param':{
type:Object,
default:{
nombre_real:'error'
}
},
'root_dir':{
type:String,
default:''
}
},
data(){
return{
fichero:{},
editableName:false,
deletableFile:false,
newName:''
}
},
methods:{
renameOrDelete(){
if (this.editableName) {
this.rename();
} else {
this.delete();
}
},
rename(){
// console.log(this.fichero);
let data = new FormData();
data.append('file',this.fichero);
data.append('new_name',this.newName);
data.append('_method','patch');
console.log('new name = '+this.newName);
let that = this;
axios.post('/fichero/'+this.fichero.id, data).then(
response => {
console.log('response.data');
console.log(response.data);
let data = response.data;
if (data.result === true) {
// that.fichero = data.file
console.log('that.newName = '+that.newName);
that.fichero.nombre_real = that.newName;
that.editableName = false;
}
},
error=>{
console.log('Error al actualizar el nombre de la imagen');
}
)
},
delete(){
console.log('delete !');
axios.delete('/fichero/'+this.fichero.id).then(
response => {
console.log('response.data');
console.log(response.data);
let data = response.data;
},
error=>{
console.log('Error al actualizar el nombre de la imagen');
}
)
}
},
beforeMount() {
this.fichero = this.$props.fichero_param;
this.newName = this.fichero.nombre_real;
}
}
</script>
Como decia al principio el **boton eliminar hace algo que lo arregla**:
<button @click="editableName = false; deletableFile = false; newName=fichero_param.nombre_real" class="btn btn-sm btn-danger">Cancelar</button>
En concreto es esto: newName=fichero_param.nombre_real entonces creo que puede ser que al cambiar de pagina se quede desactualizada esa var, ¿Podria hacer como un evento de padre a hijo para que recargara eso? Se que para pasar info de padre a hijo es por props pero no hay algun evento que se desencadeene al clickar en una pagina y actualizar eso ??
Un saludo.
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP