я пытаюсь отправить форму с Laravel API в Vuejs. Но у меня есть эта проблема, когда мне нужно отредактировать пользовательские данные.
Я использую этот метод vform, потому что я хочу загрузить изображение аватара, и в этом github я знаю, что эти парни добавляют эту функцию с npm. (https://github.com/cretueusebiu/vform/blob/master/example/upload.html).
У меня проблема в части редактирования, когда я добавляю нового пользователя, функция работает. Но при редактировании он говорит:
TypeError: this.form_edit.submit не является функцией
Вот мой код в режиме редактирования.
Если кто-то не понимает, извините, английский sh не мой первый язык, поэтому, если вы хотите что-то спросить, сделайте это.
<template>
<v-dialog v-model="dialog" width="90rem" scrollable persistent>
<v-card outlined class="m-auto center">
<v-card-title class="headline grey lighten-2" primary-title>
{{ $t('edita_usuario') }}
<v-spacer></v-spacer>
<v-card-actions >
<v-btn color="error" @click="closeModal">{{ $t('cancel') }}</v-btn>
<v-btn color="primary" @click="update"> {{ $t('update') }}</v-btn>
</v-card-actions>
</v-card-title>
<v-divider class="mx-4" /><br>
<v-card-text>
<form @submit.prevent="update" enctype="multipart/form-data">
<!--autocomplete="off" -->
<Success :message="$t('usuario_editado')" v-if="successMessage"/>
<Error :message="errorMessage" v-if="errorAlert"/>
<v-spacer></v-spacer>
<v-row no-gutters>
<v-col cols="11"></v-col>
<v-col cols="3">
<Card title="" :img="profilePicture" width="300" height="300" />
<v-col cols="10">
<v-file-input :label="$t('foto_perfil')" clearable filled prepend-icon="mdi-camera" ref="linkfoto" name="linkfoto" v-on:change="ImageChange"></v-file-input>
</v-col>
</v-col>
<v-col cols="9">
<v-row>
<v-col cols="5">
<v-text-field v-model="form_edit.nombres" :label="$t('name')" name="nombres" />
</v-col>
<!-- Apellido -->
<v-col cols="5">
<v-text-field v-model="form_edit.apellidos" :label="$t('last_name')" name="apellidos"/>
</v-col>
</v-row>
<v-row>
<v-col cols="10">
<v-text-field v-model="form_edit.email" :label="$t('email')" name="email"/>
</v-col>
</v-row>
<v-row>
<v-col cols="5">
<v-select
<v-spacer></v-spacer><br>
<label class="title">Datos de usuario</label>
<v-row class="justify-center">
<v-col cols="2"></v-col>
<v-col cols="4">
<v-text-field v-model="form_edit.alias" :label="$t('usuario')" name="alias" autocomplete="new-user"/>
</v-col>
<v-col cols="4">
<v-text-field v-model="form_edit.password" :label="$t('password')" :append-icon="show ? 'mdi-eye' : 'mdi-eye-off'" :type="show ? 'text' : 'password'" name="password" @click:append="show = !show" disabled autocomplete="newpassword" />
</v-col>
</v-row>
<!-- Perfil -->
<v-row class="justify-center">
<v-col cols="2"></v-col>
<v-col cols="4">
<v-select :items="perfiles" item-text="nombreperfil" item-value="idperfil" :label="$t('tipo_usuario')" v-model="form_edit.idperfil" name="idperfil" required />
</v-col>
<v-col cols="4">
<v-textarea name="input-7-1"
filled :label="$t('email_firma')" auto-grow v-model="form_edit.saludo"></v-textarea>
</v-col>
</v-row>
<v-divider/><br>
</form>
</v-card-text>
</v-card>
</v-dialog>
</template>
<script>
import { mapGetters } from 'vuex'
import Form from 'vform'
import objectToFormData from 'object-to-formdata'
import axios from 'axios'
export default {
middleware: 'admin',
name: 'FormEditUser',
props:['dialog','id'],
data: () => ({
form_edit: new Form({
alias: '',
password: '',
nombres:'',
apellidos:'',
email:'',
idperfil:'',
saludo:'',
linkfoto:'',
}),
profilePicture:'',
paises:[],
perfiles:[],
show: false,
successMessage : false,
errorAlert : false,
errorMessage:'',
}),
metaInfo () {
return { title: 'SIIGDE - ' + this.$t('admin') }
},
mounted: function(){
this.loadUsuario();
this.getPerfiles();
},
methods: {
update:function() {
this.form_edit.submit('put', '/api/usuarios'+this.id, {
transformRequest: [function (data, headers) { // Transforma el vform a formdata para la imagen. Si no anda tirar npm install
return objectToFormData(data)
}],
})
//axios.put('/api/usuarios/'+this.id, this.form_edit)
.then(response => {
this.successMessage = true;
this.errorAlert = false;
})
.catch(error =>{
this.errorMessage = error.response.data.errors
this.successMessage = false;
this.errorAlert = true
; })
},
getPerfiles : function(){
axios.get('/api/perfiles/0')
.then(function(response){
this.perfiles = response.data;
}.bind(this));
},
// metodos de la imagen para que cargue o se borre
ImageChange(e) {
this.UploadImage(e)
},
UploadImage(file){
let reader = new FileReader();
reader.onload = (e) =>{
this.profilePicture = e.target.result; //Asigno al input para que muestre la imagen antes del submit
this.form_edit.linkfoto = file;
}
if(file){
reader.readAsDataURL(file);
}else{
this.profilePicture = 'https://www.gravatar.com/avatar/8ab904bf2bea2e8f3c7d76f04df2087c.jpg?s=200&d=mm'
}
},
closeModal: function(){
let close = false;
this.errorAlert = false;
this.successMessage = false;
this.$emit('closeDialog',close);
},
loadUsuario(){
axios.get('/api/usuarios/'+this.id+'/edit') // Aca traigo los datos del usuario por id que mando en la url
.then((response) => {
this.form_edit = response.data;
if(!this.form_edit.linkfoto){
this.profilePicture = 'https://www.gravatar.com/avatar/8ab904bf2bea2e8f3c7d76f04df2087c.jpg?s=200&d=mm';
}else{
this.profilePicture = this.form_edit.linkfoto;
}
});
},
}, // Cierra el methods
}
</script>