Question

我正在尝试将DOM元素添加到.vue组件内部，但是我不能因为我认为该元素尚未呈现而实现。

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

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

但是我在这里遇到错误：

未捕获的TypeError：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返回未定义，并且我有一个错误：

未捕获（承诺）TypeError：无法读取未定义的属性'then'

关于我如何访问元素的任何建议？

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'）的第一件事进行导入，但实际上并不需要它来查找元素。

VueJS和jQuery查询选择器

2 个答案: