Question

我正在修改我的旧应用程序，我在due操作和vue实例中的基本选择方面遇到问题。

基本上我在数据库中有信息，我通过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指令中，然后生成许多＆＃34;标签（tabW）＆＃34;根据我在DB中有多少信息

需要

我想让用户做的就是能够点击他们想要信息的任何标签（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实例中取出，它就可以正常工作。

我怎样才能让它发挥作用？或者我是以错误的方式去做的？谢谢你提前。

Answer 1

Vue不会与JQuery愉快地共处。你的$（这个）将不起作用，因为你在那时甚至不在文档中，你是纯粹的js，虚拟DOM，另一个宇宙。然后，如果是这样，您调用的事件侦听器可能不存在。如果您希望它能够正常工作，您需要从根本上将此代码转换为Vue。我担心。

Answer 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

如何在vue（js）实例

2 个答案: