v-model data() 更改上的 Vue JS 调用函数

Question

我想通过 v-model 调用数据变化的函数

HTML 部分：

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

VueJS 部分：

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

现在这段代码工作正常，但在控制台中，我收到以下错误：

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

如何通过任何其他方法实现功能？

Answer 1

v-model 监视值并在数据中更新它，尝试使用 v-bind:value="inputDate" 而不是 v-model

Answer 2

使用 v-model 是个好主意！

使用 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>

Answer 3

您可以像下面的片段一样尝试：

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>

Answer 4

所以我设法找到了解决方案，问题出在不同的功能上。

在 data() 中，我有 2 个变量，我在不同的函数中更改了它们。

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

然后在模板中，我将前面提到的 return 作为内联样式传递，模板又在 v-for 中，这导致了无限循环

相反，我能够通过删除数据的 topValue 和 heightValue 并在 fnWithIssue(x,y)

中对它们进行贴标来解决问题

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

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

v-model data() 更改上的 Vue JS 调用函数

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

html

javascript

vue.js

vuejs2