jquery hidden() 词随机

Question

最近遇到一个奇怪的问题。我在 vue 组件的方法选项中编写了一些 jquery 代码。一切都很好，期待 jquery hide() 函数。

如果我像示例 1 那样编写代码，“.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();
        },
      }
    })

如果我像示例 2 那样编写代码，“.edit-box”会完美消失

 //example 2    
  Vue.component('auxiliary',{
    template:'#auxiliary',
    methods:{
        moveUpLib:function(){
            alert('hi');
            (this).$parent.moveUpLib();
            $('.edit-box').hide();
        },
     }
   })

所以我想知道是不是该执行我的代码了。我这样改变了我的代码。但是，我得到的只是 "Failed to load resource: the server responded with a status of 404 (Not Found)"

  //example3
  Vue.component('...',{
    template:'...',
    methods:{
        moveUpLib:function(){
            (this).$parent.moveUpLib();
            setTimeout(function(){  $('.edit-box').hide(); }, 1000);
        },
      }
   })

我想知道

1 为什么示例 1 不起作用
2 为什么我不能在 a 中使用 setTimeout Vue 的方法选项
3 如何让“.edit-box”消失没有警报

如果有人能提供帮助，那就太好了！

Answer 1

为什么要为此使用 jquery？ Vue 有自己的（更好的 :-P）处理方式。

Vue 的哲学（以及 angular 和 reac 等）是尽可能少直接接触 DOM，而是让库将 DOM 更改为适合组件的state/Data。

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
  }
}

jquery hidden() 词随机

jquery hide() works ramdonly

jquery

hide

vue.js