tengo un modal en donde quiero que el usuario suba un logo, pero Vuejs no me deja poner un input de tipo file.. me sale este error
<input v-model="eq_foto" type="file">:
File inputs are read only. Use a v-on:change listener instead.
Mire varios post sobre la directa v-on:change
y no me queda claro como usarlo.
este es mi form
<form action="" method="post" enctype="multipart/form-data" class="form-horizontal">
<div class="form-group row">
<label class="col-md-3 form-control-label" for="text-input">Ingrese el nombre del Equipo</label>
<div class="col-md-9">
<input type="text" onKeypress="if(event.keyCode == 13) event.returnValue = false;" v-model="eq_nombre" class="form-control" placeholder="Ingrese el nombre del equipo">
</div>
</div>
<div class="form-group row">
<label class="col-md-3 form-control-label" for="text-input">Ingrese la descripcion del Equipo</label>
<div class="col-md-9">
<input type="text" onKeypress="if(event.keyCode == 13) event.returnValue = false;" v-model="eq_descripcion" class="form-control" placeholder="Ingrese la descripcion del equipo">
</div>
</div>
<div class="form-group row">
<label class="col-md-3 form-control-label" for="text-input">Categoría</label>
<div class="col-md-9">
<select class="form-control" v-model="id_categoria">
<option value="0" disabled>Seleccione</option>
<option v-for="categoria in arrayCategoria" :key="categoria.id" :value="categoria.id" v-text="categoria.cat_nombre">
</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 form-control-label" for="text-input">Ingrese el logo del Equipo</label>
<div class="col-md-9">
<input type="file" onKeypress="if(event.keyCode == 13) event.returnValue = false;" v-model="eq_foto" class="form-control" placeholder="Ingrese el logo del equipo" @change="previewFiles" multiple ref="myFiles" >
</div>
</div>
<div v-show="errorEquipo" class="form-group row div-error">
<div class="text-center text-error">
<div v-for="error in errorMostrarMsjEquipo" :key="error" v-text="error">
</div>
</div>
</div>
</form>
Mas arriba se puede ver el input de tipo file que me esta creando problemas..
esta es mi data
data() {
return {
// declaracion de variables
eq_id: '',
eq_nombre: '',
eq_descripcion: '',
id_categoria: '',
eq_foto: '',
arrayEquipo: [],
modal: 0,
tituloModal: '',
// la variable tipoAccion sirve para saber si se quiere actualizar o registrar un nuevo registro
tipoAccion: 0,
errorEquipo: 0,
errorMostrarMsjEquipo: [],
pagination: {
'total': 0,
'current_page': 0,
'per_page': 0,
'last_page': 0,
'from': 0,
'to': 0,
},
offset: 3,
campo: 'eq_nombre',
buscar: '',
arrayCategoria: [],
files: [],
}
},
y esto es mis methods
methods : {
previewFiles() {
this.files = this.$refs.myFiles.files
},
listarEquipo(page, buscar, campo) {
let me = this;
var url = '/equipo?page=' + page + '&buscar=' + buscar + '&campo=' + campo;
axios.get(url).then(function (response) {
// si todo sale bien;
var respuesta = response.data;
me.arrayEquipo = respuesta.equipos.data;
me.pagination = respuesta.pagination;
})
.catch(function (error) {
// si todo sale mal XD
console.log(error);
});
},
selectCategoria(){
let me=this;
var url= '/categoria/selectCategoria';
axios.get(url).then(function (response) {
//console.log(response);
var respuesta= response.data;
me.arrayCategoria = respuesta.categorias;
})
.catch(function (error) {
console.log(error);
});
},
cambiarPagina(page, buscar, campo) {
let me = this;
// actualiza pagina actual
me.pagination.current_page = page;
// envia la peticion para visualizar la data de esa pagina
me.listarEquipo(page, buscar, campo);
},
registrarEquipo() {
if(this.validarEquipo()) {
return;
}
let me = this;
axios.post('/equipo/registrar', {
// junto a la url pasamos los parametros que se van a guardar
'eq_nombre' : this.eq_nombre,
'eq_descripcion' : this.eq_descripcion,
'id_categoria': this.id_categoria,
'eq_foto': this.eq_foto
}).then(function (response) {
// si todo sale bien
me.cerrarModal();
// llama a listar fecha y le pasamos la pagina, palabra a buscar y campo
me.listarEquipo(1, '', 'eq_nombre');
}).catch(function (error) {
// si todo sale mal XD;
// handle error
console.log(error);
});
},
actualizarEquipo() {
if(this.validarEquipo()) {
return;
}
let me = this;
axios.put('/equipo/actualizar', {
// junto a la url pasamos los parametros que se van a guardar
'eq_nombre' : this.eq_nombre,
'id': this.eq_id,
'eq_descripcion' : this.eq_descripcion,
'id_categoria': this.id_categoria,
'eq_foto': this.eq_foto
}).then(function (response) {
// si todo sale bien
me.cerrarModal();
me.listarEquipo(1, '', 'eq_nombre');
}).catch(function (error) {
// si todo sale mal XD;
// handle error
console.log(error);
});
},
desactivarEquipo(id) {
const swalWithBootstrapButtons = Swal.mixin({
confirmButtonClass: 'btn btn-success',
cancelButtonClass: 'btn btn-danger',
buttonsStyling: false,
})
swalWithBootstrapButtons.fire({
title: 'Desea descativar este equipo ?',
// text: "Si descativa esta categoria los equipos con esta categoria se veran afectados!",
type: 'warning',
showCancelButton: true,
confirmButtonText: 'Si, descativar!',
cancelButtonText: 'No, cancelar!',
reverseButtons: true
}).then((result) => {
if (result.value) {
let me = this;
axios.put('/equipo/desactivar', {
// junto a la url pasamos los parametros que se van a guardar
'id': id
}).then(function (response) {
// si todo sale bien
me.listarEquipo(1, '', 'eq_nombre');
// swalWithBootstrapButtons.fire(
// 'Descativado!',
// 'La fecha ha sido descativado.',
// 'success'
// )
}).catch(function (error) {
// si todo sale mal XD;
// handle error
console.log(error);
});
} else if (
// Read more about handling dismissals
result.dismiss === Swal.DismissReason.cancel
) {
}
})
},
activarEquipo(id) {
const swalWithBootstrapButtons = Swal.mixin({
confirmButtonClass: 'btn btn-success',
cancelButtonClass: 'btn btn-danger',
buttonsStyling: false,
})
swalWithBootstrapButtons.fire({
title: 'Desea activar este equipo ?',
// text: "Si activa esta categoria los partidos con esta categoria se veran afectados!",
type: 'info',
showCancelButton: true,
confirmButtonText: 'Si, activar!',
cancelButtonText: 'No, cancelar!',
reverseButtons: true
}).then((result) => {
if (result.value) {
let me = this;
axios.put('/equipo/activar', {
// junto a la url pasamos los parametros que se van a guardar
'id': id
}).then(function (response) {
// si todo sale bien
me.listarEquipo(1, '', 'eq_nombre');
// swalWithBootstrapButtons.fire(
// 'Activado!',
// 'La fecha ha sido activada.',
// 'success'
// )
}).catch(function (error) {
// si todo sale mal XD;
// handle error
console.log(error);
});
} else if (
// Read more about handling dismissals
result.dismiss === Swal.DismissReason.cancel
) {
}
})
},
validarEquipo() {
// funcion para comprobar que el campo fe_nombre no este vacio
this.errorEquipo = 0;
this.errorMostrarMsjEquipo = [];
if(!this.eq_nombre)this.errorMostrarMsjEquipo.push('El nombre del equipo no puede estar vacio!');
if (this.errorMostrarMsjEquipo.length)this.errorEquipo = 1;
return this.errorEquipo;
},
cerrarModal() {
this.modal = 0;
this.tituloModal = '';
this.eq_nombre = '';
this.tipoAccion = 0;
},
abrirModal(modelo, accion, data = []) {
switch(modelo){
case "equipo":
{
switch(accion) {
case 'registrar':
{
this.modal = 1;
this.tituloModal = 'Agregar equipos';
this.eq_nombre = '';
this.eq_descripcion = '';
this.id_categoria = 0;
this.eq_foto = '';
this.tipoAccion = 1;
break;
}
case 'actualizar':
{
this.modal = 1;
this.tituloModal = 'Actualizar equipo';
this.tipoAccion = 2;
// en data = [] se recibe los registros
this.eq_id = data['id'];
this.eq_nombre = data['eq_nombre'];
this.eq_descripcion = data['eq_descripcion'];
this.id_categoria = data['id_categoria'];
this.eq_foto = data['eq_foto'];
break;
// console.log(data);
}
}
}
}
this.selectCategoria();
}
},
mounted() {
// llama a la funcion
// le paso la pagina y lo que tengo en este momento en la variable buscar y campo
this.listarEquipo(1, this.buscar, this.campo);
}
Para mencionar un poco mas lo que quiero hacer es guardar el nombre de la imagen que el usuario va a subir y la imagen en si mover a la carpeta public de laravel.
esta es la funcion store de mi controlador
public function store(Request $request)
{
//
if(!$request->ajax()) return redirect('/');
$equipo = new Equipo();
$equipo->eq_nombre = $request->eq_nombre;
$equipo->eq_descripcion = $request->eq_descripcion;
$equipo->id_categoria = $request->id_categoria;
if(Input::hasFile('eq_foto')) {
$file=Input::file('eq_foto');
Image::make($request->file('eq_foto'))
->resize(144, 145)
->save(public_path().'/imagenes/equipos/' . $file->getClientOriginalName());
$empresa->eq_foto=$file->getClientOriginalName();
}
$equipo->eq_condicion = 1;
$equipo->user_id = Auth::user()->id;
$equipo->save();
}
No se si ya me salí un poco del tema de mi problema pero es que no puedo avanzar por este problema.
v-model
, solo escuchar el eventochange
del control, seguro tiene unv-model
asignado a uninput
de tipo file.