【问题标题】:Calling function outside vue component调用vue组件外的函数
【发布时间】:2016-12-06 16:05:49
【问题描述】:

目前我正在使用 Laravel 和 Vue,现在我想为标签输入字段使用第 3 方 javascript 库。 https://github.com/xoxco/jQuery-Tags-Input

我必须通过调用来初始化 javascript 中的字段:

 $('#tags').tagsInput();

但是标签输入字段在我的 vue 组件中。我尝试从 vue 调用此行,但不起作用。

现在我想知道我有哪些选择?我可以在我的 javascript 上声明一个函数并从 Vue 组件中调用它吗?我可以将整个事物作为变量传递吗?或者这种情况还有其他解决方案吗?

有这方面经验并且可能知道我必须采取的正确步骤的人吗?提前致谢。

【问题讨论】:

  • 你什么时候打这个电话?您不能使用普通的 document.ready 处理程序。理想情况下,这将被放置在 mounted 处理程序中,用于生成 id 为“tags”的元素的组件。
  • 在你的 ready 函数中尝试 window.$('#tags').tagsInput()。

标签: laravel vuejs2 vue.js


【解决方案1】:

你可以通过this.$el获取vue组件DOM元素。因此,您可以执行以下操作:

$(this.$el.querySelector('#tags')).tagsInput();

但请记住,只要您的组件不是 Fragment Instance,即它只有一个根 HTML 标记,这是有效的

【讨论】:

  • 我得到 tagsInput();不是函数。我认为这是因为我无法从 vue 中访问 javascript?
  • @Don querySelector 返回一个 HTMLElement,用 jquery 包装它:$(...)
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2018-12-06
  • 2018-11-21
  • 1970-01-01
  • 2020-01-19
  • 1970-01-01
  • 1970-01-01
  • 2019-01-19
相关资源
最近更新 更多