无法访问手表处理程序 vuejs 中的数据变量 [英] can't access data variables in watch handler vuejs
本文介绍了无法访问手表处理程序 vuejs 中的数据变量的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
I'm trying to set a data variable in a watch handler function for an input field in a VueJs Component. I have something like this:
data() {
return {
params: {
// default params to 1 month
from: new Date().setMonth(new Date().getMonth() - 1),
to: Date.now(),
skip: 0,
limit: 100
}
}
}
watch: {
dates: {
handler: date => {
console.log(this.params)
if (date.start) {
this.params.from = moment(date.start, "YYYY/MM/DD")
}
if (date.end) {
this.params.to = moment(date.end, "YYYY/MM/DD")
}
},
deep: true
}
}
When I set an input for the dates
variable in the view template, I get an undefined
for this.params
in the console log, and I get an error for trying to set this.params.from
. So I tried accessing it using a method:
methods: {
printParams() {
console.log(this.params)
}
}
calling it in the view template, it correctly resolves the params
object.
Am I missing something here?
解决方案
To avoid additional binding, just avoid using the arrow function syntax here.Instead go with ES6 Object shorthands:
watch: {
dates: {
handler(date) {
console.log(this.params)
if (date.start) {
this.params.from = moment(date.start, "YYYY/MM/DD")
}
if (date.end) {
this.params.to = moment(date.end, "YYYY/MM/DD")
}
},
deep: true
}
}
Now this
will be bound to the correct context by default.
这篇关于无法访问手表处理程序 vuejs 中的数据变量的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文