无法访问手表处理程序 vuejs 中的数据变量

Posted 2023-02-23

【中文标题】无法访问手表处理程序 vuejs 中的数据变量

【英文标题】：can't access data variables in watch handler vuejs

【发布时间】：2017-09-24 20:29:27

【问题描述】：

我正在尝试在监视处理函数中为 VueJs 组件中的输入字段设置数据变量。我有这样的事情：

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
    

当我在视图模板中为dates 变量设置输入时，我在控制台日志中得到this.params 的undefined，并且在尝试设置this.params.from 时出现错误。所以我尝试使用一种方法访问它：

methods: 
    printParams() 
        console.log(this.params)
    

在视图模板中调用它，它会正确解析params 对象。

我错过了什么吗？

【参考方案1】：

为了避免额外的绑定，这里只是避免使用箭头函数语法。而是使用 ES6 对象简写：

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
    

现在this 将默认绑定到正确的上下文。

【参考方案2】：

让我们试试 bind 这个给你的处理程序

        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")
            
        .bind(this)

【讨论】：

我经历了各种复杂的尝试来解决这个问题。 .bind(this) 是完美的！奇迹般有效。谢谢一百万。