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

【问题标题】：Vue JS call function on v-model data() changev-model data() 上的 Vue JS 调用函数更改
【发布时间】：2021-11-12 07:53:35
【问题描述】：

我想通过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.

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

【问题讨论】：

标签： javascript html vue.js vuejs2

【解决方案1】：

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

【讨论】：

【解决方案2】：

你可以尝试如下 sn-p ：

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>

【讨论】：

【解决方案3】：

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

【讨论】：

v-bind:value 的问题在于，在更改输入值时，在中，它也不会更改数据值 inputDate。我还需要更改该值，因为我正在使用 this.inputDate 调用一个函数，该函数又调用一个 API
当然不会，不过你可以自己改recallMeetingDetails(data){ this.inputData = data console.log(this.inputData); }
所以进行如下更改：v-bind:value="inputDate" @change="recallMeetingDetails($event.target.value)" 然后在recallMeetingDetails(data) 中，我正在保存this.inputData = data; 但是，Vue JS 仍然给我警告，是 Vue JS 的情况吗问题或有特定方式进行更改
等一下，inputData 是不是拼错了？我在你的代码中看不到它
是的，很抱歉它的inputDate。我设法得到了解决方案。有时间会在这里回答。感谢您的帮助

【解决方案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`,
 }
}

然后在模板中，我将上述返回作为内联样式传递，模板又在 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`
  }
}

【讨论】：