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

Question

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?

Nikola Pavicevic · Accepted Answer · 2021-09-17 15:11:33Z

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

answered Sep 17, 2021 at 15:11

Nikola Pavicevic

23.6k9 gold badges30 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tony19 · Accepted Answer · 2022-07-16 00:31:11Z

2

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>

edited Jul 16, 2022 at 0:31

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Sep 17, 2021 at 14:58

tauzN

7,4872 gold badges22 silver badges23 bronze badges

Comments

ZloiGoroh · Accepted Answer · 2021-09-17 12:38:21Z

0

v-model watches for the value and updates it in data, try to use v-bind:value="inputDate" instead of v-model

answered Sep 17, 2021 at 12:38

ZloiGoroh

4655 silver badges15 bronze badges

5 Comments

Nuruddin Over a year ago

The problem with v-bind:value was that on changing the input value, in <input type=data/>, it doesnt change the data value inputDate as well. I need to change that value as well, coz i am calling a function with this.inputDate which in turn calls an API

ZloiGoroh Over a year ago

of course it wouldn't, but you can change it by yourself recallMeetingDetails(data){ this.inputData = data console.log(this.inputData); }

Nuruddin Over a year ago

So on doing the changes as follows: v-bind:value="inputDate" @change="recallMeetingDetails($event.target.value)" and then in the recallMeetingDetails(data), I am saving this.inputData = data; However, Vue JS still gives me the warning, Is it case of Vue JS issue or theres a specific way do the changes

ZloiGoroh Over a year ago

Wait is it a mispelling with inputData? i can't see it in your code

Nuruddin Over a year ago

Yeah sorry its inputDate. I managed to get the solution. Will be answering it here in sometime. Thanks for the help

Nuruddin · Accepted Answer · 2021-09-17 15:38:40Z

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

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

Comments

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related