Is it possible to access $refs from the data section of a Vue (2.6.12) component e.g.

flickingPlugins: [new Arrow({
  prevElSelector: '.overview-arrow-prev',
  nextElSelector: '.overview-arrow-next',
  parentEl: this.$refs['overview-arrows'], // _this is undefined
})],

The reason I'm asking is because of the requirements of the Flicking slider/carousel component. This component has an additional arrow plugin, for arrows to appear on either end to control sliding content left and right. The plugin docs (3rd example) provide a Vue example that looks like this:

data() {
  return {
    plugins: [new Arrow({ parentEl: document.body })]
  }
}

The parentEl attribute is a way to specify where your custom arrow control elements will be located, and requires a HTMLElement value. I've always been told that element access should be done using refs, but how would you do that in this case?

CodePudding user response：

As far as I'm aware and the lifecycle documentation reads, this is not possible due to the design of Vue.js.

Created

[...] At this stage, the instance has finished processing the options which means the following have been set up: data observation, computed properties, [...]. However, the mounting phase has not been started, and the $el property will not be available yet.

So you will have to wait until your component has been mounted in order to access the element and its references.

Why not try an approach like this:

{
  // ...
  data () {
    // no access to $el and $refs
    return {
      plugins: []
    }
  },

  mounted () {
    // here you have access to $el and $refs
    this.plugins.push(new Arrow({ parentEl: /* ... */ }))
  },
}