如何在 vue(js) 实例中使用 $(this) 捕获点击的元素答案

【问题标题】：How to capture clicked element using $(this) inside of a vue(js) instance如何在 vue(js) 实例中使用 $(this) 捕获点击的元素
【发布时间】：2018-07-29 18:59:04
【问题描述】：

我正在改造我的一个旧应用程序，但我在 vue 实例中遇到了 dom 操作和基本选择问题。

基本上，我在通过 ajax 加载的数据库中有信息。数据库中的每条记录都有 2 个部分。标题选项卡（标题、时间、日期等）和记录正文（注释、想法等）

加载后，标题会正常显示给用户，但如果他们想查看该注释包含的内容，则必须单击标题才能显示底部。

考虑以下 html：

<vuejs for loop>
    <div v-bind:id='item._id' class="tabW" v-on:click="blueTabClick"  >
        <div class="blueTabMainColor">
            <!-- header stuff here -->
        </div>
    
    
         <div class="notesOpenedW">
            <!-- interior informaton here, HIDDEN BY CSS -->
        </div>                         
    </div>
<vuejs for loop ender>

这个 HTML 本质上是在一个 Vue for/loop 指令中，并根据我在 DB 中的信息量根据需要生成许多“tabs(tabW)”

我希望用户能够点击他们想要的信息的任何选项卡（tabW），并在下方显示注释（notesOpenedW）。

我剥离了我的整个应用程序和 js，并试图使其尽可能简单地进行测试，即使使用以下内容，我仍然无法得到任何东西。这是我的 JS(JQ)：

 $(document).ready(function(evt){
    $(".blueTabMainColor").click(function(){
        $(this).next(".notesOpenedW").fadeToggle();
    });
 });

有了这个基本代码，当我把它放在一个 Vue 实例中时，通过：

methods: {
           
    blueTabClick: function (evt) {
        evt.preventDefault();

        $(".blueTabMainColor").click(function(){
            //alert("you clicked me");
            $(this).next(".notesOpenedW").fadeToggle();
        });
    }
}

它不起作用，但是如果我将它从 Vue 实例中取出，它就可以正常工作。

我怎样才能让它工作？还是我走错路了？

【问题讨论】：

您需要利用 Vue 中的 mounted 生命周期事件。

标签： javascript jquery vue.js

【解决方案1】：

Vue 不会愉快地与 JQuery 共存。你是 $(this) 将不起作用，因为那时你甚至不在文档中，你在纯 js、虚拟 DOM、另一个宇宙中。然后，如果确实如此，则您调用的事件侦听器可能不存在。如果你想让它工作，你需要从根本上将这段代码转换到 Vue，我担心。

【讨论】：

【解决方案2】：

您可以通过在“notesOpenedW”上设置参考来实现此目的。
https://vuejs.org/v2/api/#ref
我强烈建议将此行为包装在专用组件中那将有以下内容：

<div class="tabW" v-on:click="blueTabClick"  >
    <div class="blueTabMainColor">
        <!-- header stuff here -->
    </div>


     <div class="notesOpenedW" ref="notesToggleDiv">
        <!-- interior informaton here, HIDDEN BY CSS -->
    </div>                         
</div>

还有方法：

methods: {

blueTabClick: function () {
    $(this.$refs.notesToggleDiv).fadeToggle();
}
}

请注意，在使用 Vue 时，直接操作 dom 通常是个坏主意。正如我向您展示的那样，如果您绝对需要它（或者无法负担更深入地修改您的应用程序），可以将 jQuery 与 Vue 一起使用。

编辑：刚刚发现这篇我认为对您有很大帮助的文章： https://www.smashingmagazine.com/2018/02/jquery-vue-javascript/?utm_campaign=Revue%20newsletter&utm_medium=Newsletter&utm_source=Vue.js%20Developers

【讨论】：