在 vuetify 和 laravel 中提交 PUT 表单

Question

我正在尝试在 Vuejs 中使用 Laravel API 提交表单。 但是当我需要编辑用户数据时，我遇到了这个问题。

我使用这个 vform 方法是因为我想上传一个头像图片，在这个 github 中，这家伙用 npm 添加了这个功能。 （ https://github.com/cretueusebiu/vform/blob/master/example/upload.html ）。

我的问题出在编辑部分，当我添加新用户时，该功能有效。 但在编辑它说

类型错误：this.form_edit.submit 不是函数

这是我在编辑视图中的代码。

如果有人不明白，抱歉英语不是我的第一语言，所以如果你有什么想问的，请尽管问。

<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>

Answer 1

如果用户提交您的表单，您已经说过要运行更新功能。 在您的更新中，您不需要提交表单，因为该事件已经存在。

此外，我不确定这条线在那里做什么：

<form @submit.prevent="update" enctype="multipart/form-data">

为什么你试图用...prevent="update"来实现

我会简单地使用 xhr 请求发布您的表单，您可以像这样使用 axios：

  data() {
    return {
      fields: {},
      errors: {},
    }
  },
  methods: {
    submit() {
      this.errors = {};
      axios.post('/api/usuarios'+this.id, this.fields).then(response => {
        alert('Message sent!');
        // your logic ...
      }).catch(error => {
        if (error.response.status === 422) {
          this.errors = error.response.data.errors || {};
        }
      });
    },