VueJS 和 jQuery 查询选择器

Question

我正在尝试在 .vue 组件中获取 DOM 元素，但我不能，因为我认为该元素尚未渲染。

如果我这样做，它会起作用：

setTimeout(() => {
    $('.element').do_something();
}, 100);

但这是不好的方式。

我也尝试过这样做：

// app.js
var app = new Vue({
    el: '#root',
    methods: {
        getElement(selector, cb()){
            var el = $(selector)                
            if(el.length){
                // I SEE THIS ELEMENT HERE
                cb(el);
            }else{
                setTimeout(() => {
                    this.getElement(selector);
                }, 10);
            }
        };
    }
});



// ExampleComponent.vue
export default {
    created() {
        var el = app.getElement('.selector');
        console.log(el);
    }
}

但我在这里遇到了一个错误：

未捕获的类型错误：cb 不是函数

我也尝试使用 Promise 而不是简单的回调。

// app.js
var app = new Vue({
    el: '#root',
    methods: {
        getElement(selector, cb()){
            var el = $(selector);
            if(el.length){
                return new Promise((resolve) => {
                    // I SEE THIS ELEMENT HERE
                    console.log(el);

                    resolve(el);
                });
            }else{
                setTimeout(() => {
                    this.getElement(selector);
                }, 10);
            }
        };
    }
});



// ExampleComponent.vue
export default {
    created() {
        app.getElement('.selector').then((el) => {
            console.log(el)
        });
    }
}

但是 getElement 返回 undefined 并且我有一个错误：

Uncaught (in promise) TypeError: Cannot read property 'then' of undefined

对我如何访问元素有什么建议吗？

Answer 1

我找到了解决办法。

详情： https://forum.vuejs.org/t/jquery-plugins-not-initialised-in-vuejs-when-loading-a-page-using-vue-router/16573

https://forum.vuejs.org/t/solved-this-refs-return-empty-object/33227

Answer 2

在根 Vue 实例中，组件和其中的 HTML 元素不能直接使用，并且您没有机会控制代码在组件正确创建后运行。我认为那是一条死胡同。你提到的另一件事在高层次上是正确的。但是，您的代码似乎不正确。 export default created() { 位困扰着我。

假设您有一个.vue 文件。那么它应该看起来像这样：

<template>
  <!-- using refs is an easier way of getting elements -->
  <div ref="theElementYouWant"> ... </div>
</template>

<script>
export default {
  name: 'MyComponent',
  data () {
    return {
      myvar: 0
    }
  },
  methods: { /* your methods here */ },
  created () {
    // using refs is an easier way of getting elements
    const e = this.$refs.theElementYouWant
    console.log(e)
  }
}
</script>

如果你真的需要 jQuery，你可以将它作为脚本部分 (import JQuery from 'jquery') 中的第一件事导入，但你真的不需要它来查找元素。