Nuxt：如果文档已准备好（所有CSS已加载），我如何调用方法

Question

我需要在文档准备好后调用该函数，因为我需要访问css类点。

mounted () {
    $(this).ready(function () {
      this.methods.addSlick()
    })
},
methods: {
    addSlick () {
      $(this.$refs.yourClass).slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        mobileFirst: true,
        ininite: false,
        dots: true,
        customPaging (slider, i) {
          return '<span class="dot">s</span>'
        }
      })
    }
}

控制台错误：

    jquery.js?1157:3827 Uncaught TypeError: Cannot read properties of undefined (reading 'addSlick')
        at HTMLDocument.eval (ProductSlider.vue?5b8f:30:1)
        at mightThrow (jquery.js?1157:3534:1)
        at process (jquery.js?1157:3602:1)
    eval @ ProductSlider.vue?5b8f:30
    mightThrow @ jquery.js?1157:3534
    process @ jquery.js?1157:3602
    setTimeout (async)

Answer 1

错误消息告诉您，您正在尝试访问

addSlick

中的

undefined

，这意味着第一个代码块中的

this.methods

未定义。发生这种情况是因为您将其包装在 jQuery

ready

调用中，这会更改

this

上下文，这不是您想要的。

ready

调用不是必需的，因为如果您在

mounted

中执行某些操作，您可以确保您的 ref

yourClass

在 dom 中可用。

如果从第一个代码块中删除第 2 行和第 4 行，错误消息应该会得到修复。

Answer 2

我认为这很有用： 这个答案对我有用