jquery hide()工作得很乱

Question

最近，我遇到了一个奇怪的问题。我已经在vue组件的方法选项中编写了一些jquery代码。除了jquery hide（）函数之外，一切都很好。

如果我像示例1那样编写代码，".edit框"会在很短的时间内消失，然后出现（它会闪烁）。

//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();
        },
      }
    })

如果我像示例2那样编写代码，".edit框"会完美地显示

 //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);
        },
      }
   })

我想知道

• 1为什么示例1不起作用
• 2为什么我不能在Vue的方法选项
• 3如何才能使".edit框"消失没有警报

如果有人能帮忙，那就太好了！

Answer 1

为什么要使用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
  }
}