最近，我遇到了一个奇怪的问题。我已经在vue组件的methods选项中编写了一些jquery代码。一切都很好，可以使用jquery hide（）函数。
如果我编写类似example1的代码，则“ .edit-box”会在很短的时间内消失，然后出现（闪烁）。
//my html
<p class="move-up-btn" v-on:mousedown.stop="moveUpLib">...</p>
//example 1
Vue.component('...',{
template:'...',
methods:{
moveUpLib:function(){
(this).$parent.moveUpLib();
$('.edit-box').hide();
},
}
})
如果我像example2那样编写代码，则“ .edit-box”会完美消失
//example 2
Vue.component('auxiliary',{
template:'#auxiliary',
methods:{
moveUpLib:function(){
alert('hi');
(this).$parent.moveUpLib();
$('.edit-box').hide();
},
}
})
所以我想知道现在是时候执行我的代码了。我这样改变了我的代码。但是，我得到的只是“无法加载资源：服务器响应状态为404（未找到）”
//example3
Vue.component('...',{
template:'...',
methods:{
moveUpLib:function(){
(this).$parent.moveUpLib();
setTimeout(function(){ $('.edit-box').hide(); }, 1000);
},
}
})
我想知道
如果有人可以帮助，那就太好了！
为什么要为此使用jquery？Vue有它自己的（也是更好的:-P）处理方式。
Vue的哲学（以及angular和reac的哲学）尽可能不直接与DOM接触，而instad则让库将DOM更改为适合组件的状态/数据。
的HTML：
<textarea v-show="showEditBox" class="edit-box"><textarea>
JS
data: function () {
return { showEditBox: true }
},
methods: {
moveUpLib: function () {
//other stuff...
this.showEditBox = false // <= hides the textarea
}
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句