0

no puedo lograr enviar los parametros para completar la edicion en la base de datos con laravel, este es mi codigo: No me doy cuenta donde esta el error, estoy intentando enviar via post el dato del atriburo v-model

<td>
                        <input
                          type="text"
                          class="form-control form-control-sm"
                          v-model="tel.celular"
                          aria-label="celular"
                        >
                      </td>
                      <td>
                        <input
                          type="text"
                          class="form-control form-control-sm"
                          v-model="tel.tel_fijo"
                          aria-label="tel fijo"
                        >
                      </td>

Codigo completo:

<template>
  <div>
    <!-- Button trigger modal -->
    <button
      type="button"
      style="margin-left:30%;width:400px;"
      class="btn btn-info btn-block"
      data-toggle="modal"
      data-target="#exampleModal"
    >ver mis telefonos</button>

    <!-- Modal -->
    <div
      class="modal fade"
      id="exampleModal"
      tabindex="-1"
      role="dialog"
      aria-labelledby="exampleModalLabel"
      aria-hidden="true"
    >
     <form 
                  ref="form"
                  class="form-sample"  
                  method="post"
              @submit.prevent="editTelefono"
                  >
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Mis telefonos</h5>

            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <div class="card-body">
              <span style="color:red;">{{errors}}</span>
              <div class="table-responsive">
                <table class="table table-striped">
                  <thead>
                    <tr>
                      <th></th>
                      <th>Telefono celular</th>
                      <th>Telefono fijo</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="(tel,index) in telefonos" :key="tel.id">
                      <td class="py-1">

                        <img
                          src="https://www.nicepng.com/png/detail/94-944445_icono-telfono-sumitomo-rubber-thailand-co-ltd.png"
                          alt="image"
                        >
                      </td>
                      <td>
                        <input
                          type="text"
                          class="form-control form-control-sm"
                          v-model="tel.celular"
                          aria-label="celular"
                        >
                      </td>
                      <td>
                        <input
                          type="text"
                          class="form-control form-control-sm"
                          v-model="tel.tel_fijo"
                          aria-label="tel fijo"
                        >
                      </td>


                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
            <button type="button" class="btn btn-primary">Guardar cambios</button>
          </div>
        </div>
      </div>
    </form>
    </div>
  </div>
</template>

<script>
export default {
  props: ["idu", "idglobals","value"],
  data() {
    return {
      e1: 0,
      edituser: [],
      telefonos: [],
      celular:'',
      tel:{
        tel_fijo:'',
        dato:''
      },
      errors: [],
      valid: true,
      csrf: document
        .querySelector('meta[name="csrf-token"]')
        .getAttribute("content"),
      rules: {
        nombre: value => !!value || "Nombre es  requerido",
        required: value => !!value || "Required.",
        min: v => v.length >= 8 || "Min 8 characters",
        emailMatch: () => "The email and password you entered don't match"
      }
    };
  },
  created: function() {
    // get todo items and start listening to events once component is created
    this.fetchTelefonos();
    //this.fetchTelefonos();
  },
  methods: {
    fetchTelefonos() {
      let uri = "http://localhost/presupuestando/presupuesto/public/tel";
      axios
        .get(uri, {
          method: "GET",
          mode: "no-cors",
          headers: {
            "Access-Control-Allow-Origin": "*",
            "Content-Type": "application/json"
          },
          withCredentials: true,
          credentials: "same-origin"
        })
        .then(response => {
          this.telefonos = response.data;
         // console.log(this.telefonos);
        });
    },

    editTelefono: function(e) {
      // falta de donde scara el id del admins_users para poder editar

      this.errors = [];
    console.log(this.celular)
      if (this.tel.tel_fijo == "") {
        this.errors.push("Se requiere que complete el campo telefono!");
      } else if (this.celular == "") {
        this.errors.push("Se requiere que complete el campo celular!");
      } else {
        const params = {
          celular: this.tel.celular,
          tel_fijo: this.tel.tel_fijo,
          id: this.idu
        };
        axios
          .post(
            "http://localhost/presupuestando/presupuesto/public/edit_telefono",
            params
          )
          .then(response => {
            console.log("telefono");

          })
          .catch(e => {
            console.log(e);
          });
      }
      //console.log(this.$refs.miarchivo.files);
      // console.log(this.errors);
    }
  }
};
</script>

<style>
</style>
3
  • es un array de formularios y quieres editar solo 1 verdad? o sea tienes por ejemplo 5 filas con 2 campos celular y telefono y actualizar uno po uno independientemente? o todas las filas con un solo boton? Commented el 6 abr. 2019 a las 18:33
  • Quiero editar toda la informacion de una sola vez, que salga desde el input Commented el 7 abr. 2019 a las 13:47
  • tienes que enviarle el array pues amigo tu solo estas enviando 1 solo manda el array en tu backend y con un for guardas 1 por 1 Commented el 8 abr. 2019 a las 15:18

1 respuesta 1

1

Me ha pasado que al enviar datos con axios en el método POST los parámetros no los puedo enviar como un objeto, me toca codificarlos para poderlos enviar al servidor. Lo que hago es usar el Objeto FormData nativo de Javascript.

Podrías intentar lo siguiente:

const params = new FormData();

//Se usa el método append para agregar datos a params, puedes agregar cuantos 
//parametros quieras.
params.append('celular', this.tel.celular);
params.append('tel_fijo', this.tel.tel_fijo);
params.append('id', this.idu);

axios.post("http://localhost/presupuestando/presupuesto/public/edit_telefono", params).then(response => {
  console.log("telefono");
}).catch(e => {
  console.log(e);
});

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.