在 JQuery 中访问 vue js 变量

Question

调用strike函数（在select之后）函数，出现如下错误：

Uncaught ReferenceError: selected is not defined

methods: {
    select: function(event) {
       selected = event.target.id
    },
    strike: function(event) {
        $(selected).toggleClass('strike')
    }
}

这适用于 JavaScript、document.getElementById(selected).classList.add('strike')，但不适用于 JQuery。

如何定义 selected 供 jQuery 访问？

Answer 1

因为 $() 需要一个 CSS 选择器字符串。添加 # 表示它是一个 id.

$("#" + selected).toggleClass('strike')

Answer 2

不必再次查询 DOM，最好保存对实际元素的引用：

methods: {
    select: function(event) {
       this.selected = event.target;
    },
    strike: function() {
        $(this.selected).toggleClass('strike');
    }
}

如果您不必支持旧的 IE 浏览器，您可以在这里完全放弃 jQuery，使用 classList 属性:

methods: {
    select: function(event) {
       this.selected = event.target;
    },
    strike: function() {
        this.selected.classList.toggle('strike');
    }
}

最后，应该有一种方法可以通过模板本身中 Vue 的 :class 绑定来处理所有这些。如果您向我们展示模板，我们可能会帮助您改进它。

在 JQuery 中访问 vue js 变量

access vue js variable in JQuery

javascript

jquery

vue.js