我试图在watch handler函数中为VueJs组件中的输入字段设置一个数据变量.我有这样的 idea :

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变量设置输入时,控制台日志(log)中的this.paramsundefined,而我在try 设置this.params.from时出错.所以我试着用一种方法访问它:

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

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

我错过什么了吗?

推荐答案

为了避免额外的绑定,这里只需避免使用arrow函数语法.而是使用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将绑定到正确的上下文.

Vue.js相关问答推荐

当props 的值改变时如何更新类'

Vue 3 在一个值更改问题后再次重新渲染每一行

有没有办法在 Quasar 中为明暗模式创建我自己的 colored颜色 ?

已分配计算(computed)属性,但它没有设置器

在组件之间共享 websocket 连接

vue.js 在 App.vue 中获取路由名称

为什么组件在 v-if 下没有被销毁

Webpack 你可能需要一个合适的加载器来处理这个文件类型

PhpStorm 中Expected预期表达式

如何在不实例化根实例的情况下使用 vue 组件?

如何使用 vue-resource 添加额外的标头来发布请求?

Vue @click 不适用于存在 href 的anchor锚标记

怎样1秒后自动隐藏VueJS中的元素

如何在 Vue 中转发 $refs

包含 Vue 组件的 HTML 字符串的 Nuxt 渲染函数

如何将数据属性设置为从 Vuex getter 返回的值

如何让 vuetify 数据表在卡片内时跨越容器的整个宽度?

依赖关系甚至在 package.json 和 node_modules 中都没有定义

Vue.js 显示空格(换行符)

在另一个 props 的验证器中访问 props 值