I want to call a function on data change through v-model

HTML Part:

<input
  type="date"
  name="date"
  id="date"
  v-model="inputDate"
  @change="recallMeetingDetails"
/>

VueJS Part:

data(){
  return(){
    inputDate: new Date().toISOString().slice(0, 10),
  }
}
methods: {
  recallMeetingDetails(){
    console.log(this.inputData);
  }
}

Now this code works fine, but in the console, I am getting the following error:

[Vue warn]: You may have an infinite update loop in a ponent render function.

How can I do the functionality through any other method?

I want to call a function on data change through v-model

HTML Part:

<input
  type="date"
  name="date"
  id="date"
  v-model="inputDate"
  @change="recallMeetingDetails"
/>

VueJS Part:

data(){
  return(){
    inputDate: new Date().toISOString().slice(0, 10),
  }
}
methods: {
  recallMeetingDetails(){
    console.log(this.inputData);
  }
}

Now this code works fine, but in the console, I am getting the following error:

[Vue warn]: You may have an infinite update loop in a ponent render function.

How can I do the functionality through any other method?

• javascript
• html
• vue.js
• vuejs2

Share Improve this question Follow edited May 25, 2022 at 17:25 Nikola Pavicevic 23.5k99 gold badges2929 silver badges5151 bronze badges asked Sep 17, 2021 at 12:23 NuruddinNuruddin 2322 silver badges77 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

You can try like following snippet :

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./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>

Using v-model is a great idea!

Use a watcher to watch the reactive data instead of @change on the input element, and call a function when the reactive variable changes: like this

<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 watches for the value and updates it in data, try to use v-bind:value="inputDate" instead of v-model

So I managed to find a solution, the issue was in a different function.

In data(), I had 2 variables, which I was altering in a different function.

data(){
  return{
    inputDate: new Date().toISOString().slice(0, 10),
    topValue: 0,
    heightValue: 78,
  }
}

fnWithIssue(x,y){
  this.topValue = x + this.topValue;
  this.heightValue = y + this.heightValue;

 return{
   top: `${topValue}px`,
   height: `${heightValue}px`,
 }
}

Then in a template, I was passing the aforementioned return as Inline styling, the template was in turn inside a v-for, which caused the infinite loop

Instead I was able to fix the issue by removing the data's topValue and heightValue and just decalred them in the fnWithIssue(x,y)

fnWithIssue(x,y){
  let topValue = x + topValue;
  let heightValue = y + heightValue;

  return{
    top: `${topValue}px`,
    height: `${heightValue}px`
  }
}