所以我设法找到了一个解决方案，问题出在另一个函数中。

在data()中，我有两个变量，我在一个不同的函数中对它们进行了修改。

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

然后在一个模板中，我将前面提到的返回作为内联样式传递，模板反过来在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是个好主意！

使用 watcher 来观察反应数据，而不是在输入元素上使用 @change ，并在反应变量发生变化时调用函数： 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>

您可以尝试如下代码片段：

​

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"