我做了一些隐藏/显示面板，我希望在 Vue 中使用。面板是用 Jquery 编写的 - 但是当我在 Vue 中挂载 Jquery 函数时，整个事情似乎都失败了。面板不/隐藏/显示。
有谁知道为什么？我听说 Jquery 和 Vue 存在问题，但我还没有找到解决这个问题的解决方案。我需要将 Jquery 转换为 Vue 吗(我什至不确定如何做到这一点(。任何人都可以建议我如何解决这个问题？
在这里小提琴：https://jsfiddle.net/syed263/m4s9Lyed/111/
.HTML
<!DOCTYPE html>
<html>
<head>
<link crossorigin="anonymous" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" rel="stylesheet">
<title></title>
</head>
<body>
<div class="container">
<!--COMPONENT START-->
<div>
<div>
<div id='panel0'>
<div class="panel_head">
TITLE
</div>
<div class="panel_body">
BODY
</div>
</div>
</div>
<div>
<span class="btn" id='click' value="Show/Hide"><span id="eee"><i class="far fa-window-maximize"></i></span></span>
</div>
</div>
<!--COMPONENT END-->
<!--COMPONENT START-->
<div>
<div>
<div id='panel2'>
<div class="panel_head">
TITLE
</div>
<div class="panel_body">
BODY
</div>
</div>
</div>
<div>
<span class="btn" id='click2' value="Show/Hide"><span id="eee"><i class="far fa-window-maximize"></i></span></span>
</div>
</div>
<!--COMPONENT END-->
<!--COMPONENT START-->
<div>
<div>
<div id='panel3'>
<div class="panel_head">
TITLE
</div>
<div class="panel_body">
BODY
</div>
</div>
</div>
<div>
<span class="btn" id='click3' value="Show/Hide"><span id="eee"><i class="far fa-window-maximize"></i></span></span>
</div>
</div>
<!--COMPONENT END-->
</div>
</body>
</html>
JavaScript
$('#click').click(function() {
$("#panel0").toggle("slide");
});
$('#click2').click(function() {
$("#panel2").toggle("slide");
});
$('#click3').click(function() {
$("#panel3").toggle("slide");
});
(function() {
$("#panel0").toggle("slide");
$("#panel2").toggle("slide");
$("#panel3").toggle("slide");
}());
你的问题实际上更像是两个;通过在 Vue 中使用 jQuery 来执行此操作，或者在纯 Vue 中执行此操作。 显然，最好将其转换为纯 Vue，特别是如果您只使用toggle()方法，因为仅为一个函数导入整个 jQuery 库是大材小用。
使用 jQuery 版本：
要在 Vue 中使用 jQuery，你需要包装一个 Vue 组件，并将 v-once 指令放在组件上，这样 Vue 就不用管它了。 然后，您通常会使用window.jQuery.('#someid').toggle()来定位元素
我将面板组件提炼为可重用，并从面板组件本身中使用以下方法将其定位。
methods:{
toggleMe(id){
window.jQuery('#'+id).toggle('slide');
}
}
这是完整的工作小提琴 https://jsfiddle.net/skribe/cmwtqe7d/3/
没有 jQuery 版本
复制jQuery的toggle()方法非常容易，因为它只是添加/删除"display：none"，你可以用Vue的类绑定来做到这一点。 在这种情况下甚至不需要任何功能。只需创建一个hidePaneldata 属性，编写一个.hidemecss 类，将其绑定到模板中的div，然后用hidePanel = !hidePanel和 @click 事件切换它。
<div :id='panel.pId' :class="{hideme : hidePanel}">
<div class="panel_head"> TITLE </div>
<div class="panel_body"> BODY </div>
</div>
<div>
<span @click="hidePanel = !hidePanel" class="btn">
<span id="eee"><i class="far fa-window-maximize"></i></span>
</span>
</div>
这是工作Jfiddle： https://jsfiddle.net/skribe/L9mq20nd/14/