Vue JS call function on v-model data() change

Issue

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 component render function.

How can I do the functionality through any other method?

Solution

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`
  }
}

Answered By – Nuruddin

Answer Checked By – David Marino (AngularFixing Volunteer)