Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

172
Vistas
Usando un método con v-model en vue

Tengo una pregunta sobre el uso del v-model de vue con un método en lugar de computado. Sé que no podemos hacer exactamente eso según lo que veo aquí: Cómo vincular un modelo v con un método en Vue.js. Pero sé que tiene un trabajo alrededor. Estoy usando el selector de fecha de bootstrap vue, pero creo que el concepto no está limitado por esto.

Tengo dos selectores de fecha:

 <b-form-datepicker id="end-datepicker" v-model="formatISO8601Start" class="mb-2 border-0" hide-header></b-form-datepicker> <b-form-datepicker id="end-datepicker" v-model="formatISO8601End" class="mb-2 border-0" hide-header></b-form-datepicker>

Si solo tengo un selector de fecha, solo tendría un calculado, como a continuación:

 formatISO8601: { get: function() { return ..... }, set: function(dateSegment) { .... .... } },

el problema es que no creo que pueda usar el mismo cálculo para los modelos v de los dos selectores de fecha, ya que harían referencia a lo mismo. Por supuesto, puedo crear dos computados, uno para cada selector de fecha, pero creo que es una mala práctica ya que estoy duplicando el código.

Así que pensé que tal vez podría usar dos métodos en su lugar, y en lugar de usar un

 v-model="formatISO8601"

, puedo reemplazarlo con:

 :value="getISO8601Time('start')" @input="setISO8601Time(????)"

De esa manera puedo usar lo que se pasa como parámetro para controlar la lógica:

 <b-form-datepicker id="end-datepicker" :value="getISO8601Time('start')" @input="setISO8601Time(????)" class="mb-2 border-0" hide-header></b-form-datepicker> <b-form-datepicker id="end-datepicker" :value="getISO8601Time('end')" @input="setISO8601Time(????)" class="mb-2 border-0" hide-header></b-form-datepicker> getISO8601Time(time) { return ...... } setISO8601Time(????) { .... .... }

Aquí es donde estoy confundido. Tenga en cuenta dónde he puesto el ???? . En computado, el parámetro en set , es decir, dateSegment auto rellena la fecha seleccionada, sin embargo, en un método esto no sucede. ¿Cómo obtengo la fecha seleccionada en este caso?

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Tal vez puedas probar con la función de datos:

 new Vue({ el: "#demo", data() { return { start: null, end: null } }, methods: { setISO8601Time(e, time) { e = new Date(e) this[time] = e.toISOString() } } })
 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" /> <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" /> <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script> <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script> <div id="demo"> <b-form-datepicker id="end-datepicker" :value="start" @input="setISO8601Time($event, 'start')" class="mb-2 border-0" hide-header> </b-form-datepicker> {{ start }} <b-form-datepicker id="end-datepicker" :value="end" @input="setISO8601Time($event, 'end')" class="mb-2 border-0" hide-header> </b-form-datepicker> {{ end }} </div>

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda