0

Tengo una API con Django REST framework como Backend y Vuejs como Frontend

Tengo un formulario de usuario que incluyen dos campos de password que me están arrojando un error.

El formulario es el siguiente:

                       <form @submit="onSubmit" enctype="multipart/form-data">
                        <div class="form-group row">
                            <label for="first_name" class="col-sm-2 col-form-label">Nombre</labeL>
                            <div class="col-sm-6">
                                <input type="text" placeholder="Nombre" name="first_name" class="form-control" v-model.trim="form.first_name">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="last_name" class="col-sm-2 col-form-label">Apellido</labeL>
                            <div class="col-sm-6">
                                <input type="text" placeholder="Apellido" name="last_name" class="form-control" v-model.trim="form.last_name">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="username" class="col-sm-2 col-form-label">Usuario</labeL>
                            <div class="col-sm-6">
                                <input type="text" placeholder="Usuario" name="username" class="form-control" v-model.trim="form.username">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="email" class="col-sm-2 col-form-label">Email</labeL>
                            <div class="col-sm-6">
                                <input type="email" placeholder="Email" name="email" class="form-control" v-model.trim="form.email">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="user_image" class="col-sm-2 col-form-label">Imagen de Perfil</labeL>
                            <div class="col-sm-6">
                                <input type="file" placeholder="Imagen de Perfil" name="user_image" class="form-control" >
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="password1" class="col-sm-2 col-form-label">Contraseña</labeL>
                            <div class="col-sm-6">
                                <input type="password" placeholder="Contraseña" name="password1" class="form-control" v-model.trim="form.password1">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="password2" class="col-sm-2 col-form-label">Vuelva a escribir la Contraseña</labeL>
                            <div class="col-sm-6">
                                <input type="password" placeholder="Vuelva a escribir la Contraseña" name="password2" class="form-control" v-model.trim="form.password2">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="is_active" class="col-sm-2 col-form-label">Activo</labeL>
                            <div class="col-sm-6">
                                <input type="checkbox" name="is_active" v-model.trim="form.is_active">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="is_staff" class="col-sm-2 col-form-label">Usuario Staff</labeL>
                            <div class="col-sm-6">
                                <input type="checkbox" name="is_staff" v-model.trim="form.is_staff">
                            </div>
                        </div>
                        <div class="rows">
                            <div class="col text-left">
                                <b-button type="submit" variant="primary">Aceptar</b-button>
                                <b-button class="btn-large-space" :to="{name: 'ListUser'}">Cancelar</b-button>
                            </div>
                        </div>
                    </form>

Cuando intento editar los datos del usuario, al darle el botón Submit, veo que por la consola del navegador me llega el siguiente mensaje:

password: ["Este campo es requerido."]

Sin embargo ambos campos de password sí los estoy ingresando, adjunto la captura:

Campo password con datos y el error

Que puede estar pasando??

Estoy usando axios y el método es PUT para editar el usuario, el código del vue para editar el usuario es el siguiente:

    import axios from 'axios'

export default {
  data () {
    return {
      user_id: this.$route.params.user_id,
      form: {
        first_name: '',
        last_name: '',
        username: '',
        email: '',
        user_image: '',
        password1: '',
        password2: '',
        is_active: '',
        is_staff: ''
      }
    }
  },
  methods: {



    onSubmit (evt) {
      evt.preventDefault()
      const path = `http://localhost:8000/core/ListUser/${this.user_id}/`
      axios.put(path, this.form).then((response) => {
        this.form.first_name = response.data.first_name
        this.form.last_name = response.data.last_name
        this.form.username = response.data.username
        this.form.email = response.data.email
        this.form.user_image = response.data.user_image
        this.form.password1 = response.data.password1
        this.form.password2 = response.data.password2
        this.form.is_active = response.data.is_active
        this.form.is_staff = response.data.is_staff
        alert('Usuario Actualizado')
      })
        .catch((error) => {
          console.log(error)
        })
    },

1 respuesta 1

0

RESUELTO:

Utilizando validaciones con vee-validate definí validaciones a cada campo incluyendo los de password

vee-validate Reglas disponibles

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.