Quiero llamar a una función sobre el cambio de datos a través de v-model
Parte HTML:
<input type="date" name="date" id="date" v-model="inputDate" @change="recallMeetingDetails" />Parte VueJS:
data(){ return(){ inputDate: new Date().toISOString().slice(0, 10), } } methods: { recallMeetingDetails(){ console.log(this.inputData); } }Ahora este código funciona bien, pero en la consola, recibo el siguiente error:
[Vue warn]: You may have an infinite update loop in a component render function.¿Cómo puedo hacer la funcionalidad a través de cualquier otro método?
Puedes probar como el siguiente fragmento:
new Vue({ el: '#demo', data(){ return { inputDate: new Date().toISOString().slice(0, 10) } }, methods: { recallMeetingDetails(date){ this.inputDate = new Date(date).toISOString().slice(0, 10) } } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="demo"> <input type="date" name="date" id="date" :value='inputDate' @input="recallMeetingDetails($event.target.value)" /> <h3>{{ inputDate }}</h3> </div>¡Usar v-model es una gran idea!
Use un observador para ver los datos reactivos en lugar de @change en el elemento de entrada, y llame a una función cuando cambie la variable reactiva: así
<template> <input type="date" name="date" id="date" v-model="inputDate" /> </template> <script> export default { data() { return { inputDate: new Date().toISOString().slice(0, 10) } }, watch: { inputDate(value) { console.log(value) } } } </script>v-model busca el valor y lo actualiza en los datos, intente usar v-bind:value="inputDate" en lugar de v-model