link之家
链接快照平台
- 输入网页链接，自动生成快照
- 标签化管理网页链接
相关文章推荐
|
发呆的洋葱 · 使用JDBC连接与开发PolarDB ...· 4 周前 · |
|
|
急躁的自行车 · 《佛莞城际轨道交通狮子洋过江隧道工程海域使用 ...· 4 月前 · |
|
|
高大的白开水 · Translator Translate ...· 4 月前 · |
|
|
耍酷的企鹅 · C罗之后，再无7号！C罗走后穿曼联7号球衣的 ...· 1 年前 · |
|
|
酷酷的足球 · 一桥飞架中欧--记习近平主席欧洲之行-新华网· 1 年前 · |
|
|
火星上的紫菜汤 · 葛兆光：海外中国学本质上是“外国学”-孔府档 ...· 1 年前 · |
v-model data() change上的Vue JS调用函数
问
v-model data() change上的Vue JS调用函数
EN
Stack Overflow用户
提问于
2021-09-17 12:23:03
回答 4
查看 200
关注 0
票数 1
我想通过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.我如何通过任何其他方法实现该功能？
EN
回答 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`
}
票数 0
EN
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>
票数 1
EN
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"
推荐文章
|
|
酷酷的足球 · 一桥飞架中欧--记习近平主席欧洲之行-新华网 1 年前 |