Error in Arrow Plugins

[BelashKirill]

@egjs_flicking-plugins.js?v=7986845e:396 Uncaught (in promise) Error: [Flicking-Arrow] Couldn't find element with the given selector: .flicking-arrow-prev
at getElement (@egjs_flicking-plugins.js?v=7986845e:396:11)
at __proto.init (@egjs_flicking-plugins.js?v=7986845e:561:18)
at chunk-LQW74EMY.js?v=7986845e:9934:21
at Array.forEach ()
at __proto.addPlugins (chunk-LQW74EMY.js?v=7986845e:9933:15)
at Proxy.checkPlugins (@egjs_vue3-flicking.js?v=7986845e:808:46)
at Proxy.mounted (@egjs_vue3-flicking.js?v=7986845e:708:10)
at chunk-2FDUVFJ5.js?v=7986845e:4317:88
at callWithErrorHandling (chunk-2FDUVFJ5.js?v=7986845e:1660:19)
at callWithAsyncErrorHandling (chunk-2FDUVFJ5.js?v=7986845e:1667:17)

<div class="content">
    <Flicking :options="{ circular: true }" :plugins="plugins">
      <div class="card-panel">1</div>
      <div class="card-panel">2</div>
      <div class="card-panel">3</div>
    </Flicking>
    <span class="flicking-arrow-prev is-outside"></span>
    <span class="flicking-arrow-next is-outside"></span>
  </div>
<script lang="ts">
import { defineComponent } from "vue";
import Flicking from "@egjs/vue3-flicking";
import { Arrow } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/arrow.css";

export default defineComponent({
  components: {
    TableDocs,
    Flicking,
  },
  data() {
    return {
      plugins: [
        new Arrow(),
      ],
    };
  },
});
</script>

[vadykoo]

anyone fix it?

[AH-SALAH]

fixed it by specifying a parentEl for the Arrow plugin to query based on the parent, (from plugin code) i think because its outside the .flicking-viewport element so it'll query the arrow element through the parent element that it doesn't know..

i think it can also set inside the flicking component like this from the doc.

**make sure vue3 syntax is correct..

<div ref="content" class="content">
    <Flicking :options="{ circular: true }" :plugins="plugins">
      <div class="card-panel">1</div>
      <div class="card-panel">2</div>
      <div class="card-panel">3</div>
    </Flicking>
    <span class="flicking-arrow-prev is-outside"></span>
    <span class="flicking-arrow-next is-outside"></span>
  </div>
<script lang="ts">
...

export default defineComponent({
  components: {
    TableDocs,
    Flicking,
  },
  data() {
    return {
      plugins: [],
    };
  },
  onMounted(){
    if(!this.plugins.length) this.plugins.push(new Arrow({ parentEl: this.$refs.content, prevElSelector: ".flicking-arrow-prev", nextElSelector: ".flicking-arrow-next" }))
  }
});
</script>```