v-model data() change上的Vue JS调用函数
v-model data() change上的Vue JS调用函数
提问于 2021-09-17 12:23:03
我想通过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.我如何通过任何其他方法实现该功能？
回答 4
Stack Overflow用户
回答已采纳
发布于 2021-09-17 15:38:41
所以我设法找到了一个解决方案，问题出在另一个函数中。
在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`
}
}Stack Overflow用户
发布于 2021-09-17 14:58:10
使用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>Stack Overflow用户
发布于 2021-09-17 15:11:33
您可以尝试如下代码片段：
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69223374
复制相关文章
相似问题
腾讯云开发者
