0

Un saludo, estoy trabajando con Larevel y gradualmente me he ido moviendo de JQuery a VueJS (a pesar de que tengo muy pero muy poca experiencia con Vue) sin embargo hoy descubrí que si tienes un id en una etiqueta html que sea controlada por Vue inactivo todo el código JQuery, así que tenía un datepicker que funcionaba con JQuery y se me inhabilitó porque deseaba realizar unas validaciones en Vue.

Ahora opté por reemplazar el datepicker de jquery por un datepicker de bootstrap-vue, ya logré que cargue la vista pero no logro que con el formulario viaje el campo de la fecha al controlador.

Lo estoy haciendo a través de WebPack con Laravel Mix, a continuación el código de mi formulario, podrán ver en la etiqueta <form> que tengo un id con el que controlo las validaciones del formulario (Esto no lo hago con Laravel Mix) que se llama editSubscriberForm y otra en el componente datepicker.

<form id="editSubscriberForm" @submit="checkForm" class="user" method="POST" action="/edit_subscriber/{{$email->subscriberemail_id}}" autocomplete="off">
  @csrf
  <div v-if="errors.length" class="alert alert-danger mt-4">
    <b style="color: red">Please correct the following error(s):</b>
    <li v-for="error in errors">@{{ error }}</li>
  </div>
  <div class="form-group">
    <label for="email"><strong>Email</strong></label>
    <input type="email" class="form-control form-control-user" id="exampleFirstName" placeholder="{{ $email->subscriber_email }}" name="email" v-model="email">
  </div>
  <div class="form-group">
    <label for="name"><strong>Name</strong></label>
    <input type="text" class="form-control form-control-user" id="exampleInputEmail" placeholder="{{ $email->subscriber_name }}" name="name" v-model="name">
  </div>
  <div class="form-group">
    <label for="lastname"><strong>Last Name</strong></label>
    <input type="text" class="form-control form-control-user" id="exampleFirstName" placeholder="{{$email->subscriber_lastname}}" name="lastname" v-model="lastname">
  </div>
  <div class="form-group row">
    <div class="col-sm-6 mb-3 mb-sm-0">
      <label for="phone"><strong>Phone</strong></label>
      <input type="text" class="form-control form-control-user" id="phone" placeholder="{{ $email->subscriber_phone }}" name="phone" v-model="phone">
    </div>
    <div class="col-sm-6">
      <label for="whatsapp"><strong>WhatsApp</strong></label>
      <input type="text" class="form-control form-control-user" id="whatsapp" placeholder="{{ $email->whatsapp_number }}" name="whatsapp" v-model="whatsapp">
    </div>
  </div>
  <div class="form-group" id="app">
    <label for="custom-field4"><strong>Birth Date</strong></label>
    <datepicker-vue v-model="birthDate" name="birth_date">
    </datepicker-vue>
  </div>
  <!--<div class="form-group">
                                <label for="birth-date"><strong>Birth Date</strong></label>
                                <input type="text" id="datepicker" placeholder="{{$email->birth_date}}"
                                    name="birth_date" v-model="birthDate">
                            </div>-->
  <div class="form-group">
    <label for="custom-field1"><strong>Custom Field 1</strong></label>
    <input type="text" class="form-control form-control-user" id="customField1" placeholder="{{$email->custom_field1}}" name="custom_field1" v-model="customField1">
  </div>
  <div class="form-group">
    <label for="custom-field2"><strong>Custom Field 2</strong></label>
    <input type="text" class="form-control form-control-user" id="customField2" placeholder="{{$email->custom_field2}}" name="custom_field2" v-model="customField2">
  </div>
  <div class="form-group">
    <label for="custom-field3"><strong>Custom Field 3</strong></label>
    <input type="text" class="form-control form-control-user" id="customField3" placeholder="{{$email->custom_field3}}" name="custom_field3" v-model="customField3">
  </div>
  <div class="form-group">
    <label for="custom-field4"><strong>Custom Field 4</strong></label>
    <input type="text" class="form-control form-control-user" id="customField4" placeholder="{{$email->custom_field4}}" name="custom_field4" v-model="customField4">
  </div>
  <br>
  <div class="row justify-content-center">
    <input type="submit" class="btn btn-success btn-user" name="submit-edituser" value="Update User"> &nbsp; &nbsp;
    <input type="reset" class="btn btn-warning btn-user" value="Clear Form">
  </div>
</form>

Y el componente es el que me suministra por defecto Bootstrap Vue:

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
    <div>
        <b-form-datepicker
            v-model="value"
            :min="min"
            :max="max"
            locale="en"
        ></b-form-datepicker>
    </div>
</template>

<script>
export default {
    data() {
        const now = new Date();
        const today = new Date(
            now.getFullYear(),
            now.getMonth(),
            now.getDate()
        );
        // 15th two months prior
        const minDate = new Date(today);
        minDate.setMonth(minDate.getMonth() - 2);
        minDate.setDate(15);
        // 15th in two months
        const maxDate = new Date(today);
        maxDate.setMonth(maxDate.getMonth() + 2);
        maxDate.setDate(15);

        return {
            value: "",
            min: minDate,
            max: maxDate
        };
    }
};
</script>

Ahora no se si quiera si se puede hacer, pero quiero agregar el atributo name a la etiqueta <datepicker-vue></datepicker-vue> para poder enviarlo en dicho formulario. De no poderse hacer, que solución me recomiendan para resolver el problema con datepicker.

1 respuesta 1

2

Logré resolver pasar el atributo name declarando el atributo en el componente de la siguiente forma:

Declare el props con el nombre name

export default {
  data() {
    const now = new Date();
    const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
    // 15th two months prior
    const minDate = new Date(today);
    minDate.setMonth(minDate.getMonth() - 2);
    minDate.setDate(15);
    // 15th in two months
    const maxDate = new Date(today);
    maxDate.setMonth(maxDate.getMonth() + 2);
    maxDate.setDate(15);

    return {
      value: "",
      min: minDate,
      max: maxDate,
      name: "birthDate",
    };
  },
  props: {
    name: String,
  },
};

En el return coloqué un dato declaratorio y lo pasé al template:

<template>
  <div>
    <b-form-datepicker v-model="value" :min="min" :max="max" locale="en" :name="name"></b-form-datepicker>
  </div>
</template>

Ahora en la plantilla blade llamo mi componente pasandole el nombre con el que espero recibirlo en el controlador y listo:

<div class="form-group" id="app">
  <label for="custom-field4"><strong>Birth Date</strong></label>
  <datepicker-vue v-model="birthDate" name="birth_date">
  </datepicker-vue>
</div>

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.