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