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

Posted 2023-02-16

【中文标题】v-model data() 上的 Vue JS 调用函数更改

【英文标题】：Vue JS call function on v-model data() change

【发布时间】：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.

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

【参考方案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: `$topValuepx`,
   height: `$heightValuepx`,
 

然后在模板中，我将上述返回作为内联样式传递，模板又在 v-for 中，这导致了无限循环

相反，我能够通过删除数据的 topValue 和 heightValue 并在 fnWithIssue(x,y) 中标记它们来解决问题

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

  return
    top: `$topValuepx`,
    height: `$heightValuepx`