我试图运行一个名为query()的方法,但Vue中的组件属性名为q.js被修改了.

这失败了,因为this.query()是未定义的.This指的是我的组件的实例,但不知何故不包含这些方法.

下面是相关的代码部分,我试图查看组件属性q并运行query()函数:

methods: {
  async query() {
    const url = `https://example.com`;
    const results = await axios({
      url,
      method: 'GET',
    });
    this.results = results.items;
  },
  debouncedQuery: _.debounce(() => { this.query(); }, 300),
},
watch: {
  q() {
    this.debouncedQuery();
  },
},

错误:

Type错误: _this2.query is not a function

If I write the debounce() call as below, the Type错误: expected a function error appears even earlier, at the page load.

debouncedQuery: _.debounce(this.query, 300),

推荐答案

这个问题来自您在_.debounce中定义的箭头函数的词法范围.this绑定到要在其中定义它的对象,而不是实例化的Vue实例.

如果将箭头函数切换为常规函数,则范围将正确绑定:

methods: {
  // ...
  debouncedQuery: _.debounce(function () { this.query(); }, 300)
}

Vue.js相关问答推荐

在VueJS中卸载元素之前是否应该删除JavaScript事件收件箱?

在移动版本中使用标准的 v-data-table

超出最大调用堆栈大小 - Vue路由

带有 netlify.toml 文件的环境变量

如果在 VueJS/VuetifyJS 中切换switch,则调用函数

我可以在打印 HTML 页面时使用作用域 CSS 吗? (使用 Laravel 和 Vue.js)

如何从mustache内的过滤器输出html

在重复内容区域中添加

Vuex - 如何跨不同选项卡持久存储更新?

webpack模块解析失败意外字符'@'

如何将参数传递给使用 ...mapActions(...) 映射的函数?

如何使用 vue.js 获取所选选项的索引

如何将 v-if 与 Vue.js 中的值进行比较

我可以修改 Vue.js VNodes 吗?

如何从 v-for 创建的对象中绑定多个类?

从 vue.js 中的 store 获得的计算(computed)属性的设置器

动态更改我的 Vue.js SPA 主题的最佳方式?

在 .vue 文件中使用 Vue.set() 和 Vue.use()

检测 Vue-Router 导航Guards中的后退按钮

如何修复套接字 io 中的 400 错误错误请求?