Encountering an error while rendering the project. I've thoroughly checked all details but couldn't pinpoint which line is causing the issue. The console displays the following warning: Vue warn]: Property or method "options" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. For more information, refer to this link. Here's what I have tried.
navbar.vue
<template>
<div id="navbar">
<nav id="sidebar">
<ul class="list-unstyled components">
<p></p>
<div id="dismiss">
<i class="fas fa-times left"></i>
</div>
<li id="active" class="active">
<a id="active"><i class="fa-fw fas fa-book fa-xs"></i> Programs</a>
<ul id="homeSubmenu">
<li>
<a href="en-beginner.html">English for Beginners</a>
</li>
<!-- <li>
<a href="#">Intermediate English</a>
</li> -->
<li>
<a href="https://ahoyla.com/ielts">IELTS Preparation</a>
</li>
</ul>
</li>
<li class="active">
<a id="active"><i class="fa-fw fas fa-user-graduate fa-xs"></i> Learning</a>
<ul id="pageSubmenu">
<li>
<a class="off-canvas-item" href="https://lms.ahoyla.com/english-beginners">Beginner Level</a>
</li>
<li>
<a class="off-canvas-item" href="https://lms.ahoyla.com/english-intermediate">Intermediate Level</a>
</li>
<li>
<a class="off-canvas-item" href="https://lms.ahoyla.com/ielts-course-1">IELTS Course</a>
</li>
</ul>
</li>
<li class="active">
<a href="https://ahoyla.com/"><img class="li-image" src="../assets/images/ahoyla.png" width="20" height=&q...
...
...
...
<Footer/>
</div>
</template>
<script>
import Footer from '@/components/Footer.vue'
import whiteNavbar from '@/components/whiteNavbar.vue'
import Flickity from 'vue-flickity'
import $ from 'jquery'
export default {
name: 'beginner',
components: {
whiteNavbar,
Footer,
Flickity,
},
data(){
return{
flickityOptions: {
contain:true,
prevNextButtons: false,
pageDots: false,
wrapAround: false,
},
flickityOptions2: {
cellAlign:"center",
wrapAround:true,
prevNextButtons: false,
pageDots: false,
}
}
},
mounted () {
this.$refs.plyr.player.on('event', () => console.log('event fired'))
$(".plyr__controls").hide();
$(".plyr__control--overlaid").click(function() {
$(".plyr__controls").show();});
},
methods: {
next() {
this.$refs.flickity.next();
},
previous() {
this.$refs.flickity.previous();
}
},
}
</script>