Vue警告]：属性或方法“选项”未在实例上定义，但在render.Vue js问题期间引用
Posted
技术标签:
【中文标题】Vue警告]：属性或方法“选项”未在实例上定义，但在render.Vue js问题期间引用【英文标题】：Vue warn]: Property or method "options" is not defined on the instance but referenced during render.Vue js issue 【发布时间】：2021-10-16 10:08:43 【问题描述】：渲染项目时出错。我检查了所有详细信息，但找不到导致问题的行。控制台说 Vue警告]：属性或方法“选项”未在实例上定义，但在渲染期间被引用。通过初始化该属性，确保此属性是反应性的，无论是在数据选项中，还是对于基于类的组件。请参阅：https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties。 这是我尝试过的。
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> Программы</a>
<ul id="homeSubmenu">
<li>
<a href="en-beginner.html">Английский для начинающих</a>
</li>
<!-- <li>
<a href="#">Английский для среднего уровня</a>
</li> -->
<li>
<a href="https://ahoyla.com/ielts">Подготовка к IELTS</a>
</li>
</ul>
</li>
<li class="active">
<a id="active"><i class="fa-fw fas fa-user-graduate fa-xs"></i>Обучение</a>
<ul id="pageSubmenu">
<li>
<a class="off-canvas-item" href="https://lms.ahoyla.com/english-beginners">Начальный уровень</a>
</li>
<li>
<a class="off-canvas-item" href="https://lms.ahoyla.com/english-intermediate">Средний уровень</a>
</li>
<li>
<a class="off-canvas-item" href="https://lms.ahoyla.com/ielts-course-1">IELTS</a>
</li>
</ul>
</li>
<li class="active">
<a href="https://ahoyla.com/"><img class="li-image" src="../assets/images/ahoyla.png" >Метод обучения Ahoyla</a>
</li>
<li class="active">
<a href="https://lms.ahoyla.com/plans-pricing"><img class="li-image" src="../assets/images/ahoyla.png" >Тарифные планы</a>
</li>
</ul>
</nav>
<div class="overlay"></div>
<nav class="navbar navbar-expand-lg navbar-light bg-transparent">
<router-link to="/">
<a style="width: auto;" class="navbar-brand" id="navbar-desktop">
<img id class="navbar-image" src="../assets/images/logo.svg" >
</a></router-link>
<button style="background: transparent; color: black; border: none;" type="button" id="sidebarCollapse" class="mobile-menu">
<span style="background: transparent;" class="fas fa-bars"></span>
</button>
<router-link to="/">
<a style="width: 180px;" class="navbar-brand" id="navbar-mobile">
<img class="navbar-image" src="../assets/images/logo.svg" >
</a></router-link>
<li id="nav-link" class="nav-item" href="https://www.lms.ahoyla.com/login">
<a style="color: inherit;" href="https://www.lms.ahoyla.com/login"> <i class="fas fa-user-circle fa-lg" ></i></a>
</li>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="nav navbar-nav mr-auto">
<router-link to="/beginner"><li class="nav-item dropdown active">
<a class="nav-link" id="navbarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Программы
</a>
</li></router-link>
<li class="nav-item dropdown active">
<a class="nav-link" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Обучение
</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Тестирование <span
class="sr-only">(current)</span></a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a style="color: inherit;" href="https://www.lms.ahoyla.com/login"> <i class="fas fa-user-circle fa-lg"></i></a>
</li>
<li class="nav-item active">
<a class="nav-link">Your Bookings</a>
</li>
</ul>
</div>
</nav>
</div>
</template>
<script>
import $ from 'jquery'
export default
name:'navbar',
mounted()
let sidebar = document.createElement('script')
sidebar.setAttribute('src', 'https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js')
document.head.appendChild(sidebar)
$(document).ready(function()$("#sidebar")
.mCustomScrollbar(theme:"minimal")
,$("#dismiss, .overlay")
.on("click",function()$("#sidebar")
.removeClass("active"),$(".overlay")
.removeClass("active")),$("#sidebarCollapse")
.on("click",function()$("#sidebar")
.addClass("active"),$(".overlay")
.addClass("active"),$(".collapse.in")
.toggleClass("in"),$("a[aria-expanded=true]")
.attr("aria-expanded","false")));
,
</script>
Beginner.vue
<template>
<div>
<div class="beginnerEnglish">
<div class="container">
<div class="navbarArea" id="navbarArea">
<white-navbar/>
<div class="InitialContent">
<h1 class="bannerHeader">Заговори на английском за 30 дней</h1>
<h2 class="h2Header">Занимайтесь с сильными преподавателями от <br/>1 000тг за занятие</h2>
<button class="SeeTheCourse">Начать заниматься</button>
</div>
</div>
</div>
</div>
<div class="comfortEnglish">
<div class="container-fluid">
<div id="container-width">
<h1 class="comfortHeader" style="margin-bottom: 50px;">Выбирайте комфортный английский</h1>
<flickity class="carousel" ref="flickity" :options="flickityOptions">
<div class="carousel-cell text-center">
<div class="inner">
<span style="color:#55C4C6" class="fas fa-comments fa-2x"></span>
<div class="card-body">
<h5 style="color:#55C4C6" class="card-title">Обучение через общение</h5>
<p class="card-text">Максимум разговорной практики - вы будете говорить уже с первого урока, даже если учите английский с нуля.</p>
</div>
</div>
</div>
<div class="carousel-cell text-center">
<div class="inner">
<span style="color:#55C4C6" class="fas fa-bullseye fa-2x"></span>
<div class="card-body">
<h5 style="color:#55C4C6" class="card-title">Приводим к цели</h5>
<p class="card-text">Помогаем заговорить на английском, сдать экзамены, поступить в вуз и улучшить навыки английского языка.</p>
</div>
</div>
</div>
<div class="carousel-cell text-center">
<div class="inner">
<span style="color:#55C4C6" class="fas fa-smile fa-2x"></span>
<div class="card-body">
<h5 style="color:#55C4C6" class="card-title">Учитываем интересы</h5>
<p class="card-text">Добавляем в уроки фильмы с субтитрами, книги, игры, комиксы. Подаем контент не скучно.</p>
</div>
</div>
</div>
</flickity>
</div>
</div>
</div>
<div class="headLiner2" id="headLine">
<div class="container-fluid h-100">
<div class="headlinerCenter text-center ml-auto mr-auto">
<div class="row no-gutters align-items-center justify-content-center h-100 ">
<div class="col-md-12">
<h2 class="blackHeader">Записывайтесь на бесплатную консультацию</h2>
<h2 class="whiteHeader">Познакомим со школой и покажем, как проходят занятия</h2>
<button class="register">Записаться</button>
</div>
</div>
</div>
</div>
</div>
<div class="comfortEnglish" id="comforEnglish2">
<div class="container-fluid justify-content-end">
<h1 class="comfortHeader" id="comfortHeader" style="margin-bottom: 50px;">Что вы получите</h1>
<flickity class="carousel" ref="flickity" :options="flickityOptions">
<div class="carousel-cell text-center" style="background-color: azure;">
<span style="color:#55C4C6" class="fas fa-user-graduate fa-2x"></span>
<div class="card-body">
<h5 style="color:#55C4C6" class="card-title">Уникальная методика</h5>
<p class="card-text">Наши методики, помогают преодолеть языковой барьер и помогают вывести вас на новый уровень</p>
</div>
</div>
<div class="carousel-cell text-center" style="background-color: azure;">
<span style="color:#55C4C6" class="fas fa-heartbeat fa-2x"></span>
<div class="card-body">
<h5 style="color:#55C4C6" class="card-title">Приводим к цели</h5>
<p class="card-text">Посещай онлайн лекции с преподавателем, задавай все интересующие вопросы.</p>
</div>
</div>
<div class="carousel-cell text-center" style="background-color: azure;">
<span style="color:#55C4C6" class="fas fa-user-check fa-2x"></span>
<div class="card-body">
<h5 style="color:#55C4C6" class="card-title">Учитываем интересы</h5>
<p class="card-text">Подстраиваемся под ваши потребности и адаптируем учебные материалы под ваши задачи</p>
</div>
</div>
</flickity>
</div>
</div>
<div class="midContent">
<div class="container-fluid">
<div class="pinkContent ml-auto mr-auto">
<div class="d-flex no-gutters align-content-start flex-wrap">
<div class="image" id="image">
<img src="../assets/images/coaching.png">
</div>
<div class="word">
<h1>онлайн дешевле чем офлайн</h1>
<p class="pinkContentparagraph">Наши цены в 2 раза ниже, чем у оффлайн-репетиторов. Почему? Все просто: наши преподаватели английского не тратят время на дорогу к Вам!</p>
<button class="SeeTheCourse">Начать заниматься</button>
<p class="lowerParagraph"> <span class="fas fa-thumbs-up fa-fw"></span>Кроме того, не забывайте, что у нас в Ahoyla Вы можете пройти множество бесплатных пробных уроков, чтобы найти своего репетитора (разве такое возможно оффлайн?).
</p>
<p class="lowerParagraph2"><b>Английский онлайн с Ahoyla — это выгодно</b></p>
</div>
</div>
</div>
</div>
</div>
<div class="prices">
<div class="container">
<h1 class="comfortHeader" id="comfortHeader" style="margin-bottom: 50px;">Наши цены</h1>
<div class="d-flex row no-gutters justify-content-center">
<div class="card text-center mt-3">
<div class="card-body">
<h5 class="card-title">10 Уроков</h5>
<h5 id="biggerSize" class="card-title" style="font-weight: bold; padding-bottom:5px;padding-top:15px;">1 600 <span class="fas fa-tenge d-inline-block"></span></h5>
<p id="card-height" class="card-text">за урок</p>
<p class="card-text">Всего к оплате 16 000тг </p>
<button class="SeeTheCourse mt-5">Начать заниматься</button>
<a class="collapsed d-lg-none d-md-block" data-toggle="collapse" href="#collapse-collapsed" aria-controls="collapse-collapsed" id="body-collapsed">
<span class="fa fa-chevron-down pull-bottom"></span>
</a>
<div id="collapse-collapsed" class="collapse d-lg-block" aria-labelledby="body-collapsed">
<p id="lowerbodyparagraph" class="card-text">10 онлайн уроков</p>
<p id="lowerbodyparagraph" class="card-text">Интерактивные задания</p>
<p id="lowerbodyparagraph" class="card-text" style="border-bottom: none;" >Безлимитный доступ к материалам</p>
</div>
</div>
</div>
<div class="card text-center mt-3">
<div class="card-body">
<h5 class="card-title" >30 Уроков</h5>
<h5 id="biggerSize" class="card-title d-inline-block" style="font-weight: bold; padding-bottom:5px;padding-top:15px;">1 300<span class="fas fa-tenge d-inline-block"></span></h5>
<p id="card-height" class="card-text">за урок</p>
<p class="card-text">Всего к оплате 39 000тг </p>
<p class="economyTariff">Сэкономить 9 000 тг</p>
<button class="SeeTheCourse">Начать заниматься</button>
<a class="collapsed d-lg-none d-md-block" data-toggle="collapse" href="#collapse-collapsed2" aria-controls="collapse-collapsed2" id="body-collapsed">
<span class="fa fa-chevron-down pull-bottom fa-md"></span>
</a>
<div id="collapse-collapsed2" class="collapse d-lg-block" aria-labelledby="body-collapsed">
<p id="lowerbodyparagraph" class="card-text">30 онлайн уроков</p>
<p id="lowerbodyparagraph" class="card-text">Интерактивные задания</p>
<p id="lowerbodyparagraph" class="card-text" style="border-bottom: none;">Безлимитный доступ к материалам</p>
</div>
</div>
</div>
<div class="card text-center mt-3">
<div class="card-body">
<div class="sale">
Лучший выбор!
</div>
<h5 class="card-title">60 Уроков</h5>
<h5 id="biggerSize" style="color: #2FAFE5;font-weight: bold; padding-bottom:5px;padding-top:15px;" class="card-title">1 000 <span class="fas fa-tenge d-inline-block"></span></h5>
<p id="card-height" class="card-text">за урок</p>
<p class="card-text">Всего к оплате 60 000тг</p>
<p class="economyTariff">Сэкономить 16 000 тг</p>
<button class="SeeTheCourse">Начать заниматься</button>
<a class="collapsed d-lg-none d-md-block" data-toggle="collapse" href="#collapse-collapsed3" aria-controls="collapse-collapsed3" id="body-collapsed">
<span class="fa fa-chevron-down pull-bottom"></span>
</a>
<div id="collapse-collapsed3" class="collapse d-lg-block" aria-labelledby="body-collapsed">
<p id="lowerbodyparagraph" class="card-text">60 онлайн уроков</p>
<p id="lowerbodyparagraph" class="card-text">Премиальная поддержка</p>
<p id="lowerbodyparagraph" class="card-text">Обратная связь</p>
<p id="lowerbodyparagraph" class="card-text" style="border-bottom: none;">Безлимитный доступ к материалам</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="policy">
<div class="container">
<div class="d-flex row justify-content-center">
<div class="p-2">
<span class="fas fa-user-shield d-inline-block"></span>
</div>
<div class="p-2">
<h4>Безопасная оплата</h4>
<p class="d-inline-block">Все транзакции будут обрабатываться через соединение с шифрованием SSL.</p>
</div>
<div class="p-2">
<span class="fas fa-undo d-inline-block"></span>
</div>
<div class="p-2">
<h4>30-дневная гарантия возврата денег</h4>
<p class="d-inline-block">Все транзакции будут обрабатываться через соединение с шифрованием SSL..</p>
</div>
</div>
</div>
</div>
<div class="feedbacks" id="feedbacks">
<div class="container-fluid">
<h1 class="comfortHeader" id="comfortHeader">Отзывы</h1>
<div id="container-width">
<flickity style="margin-top: 50px;" class="carouselLeft2" ref="flickity" :options="flickityOptions2">
<div class="cell">
<vue-plyr :options="options">
<video playsinline data-poster="poster.jpg" class="js-player">
<source size="720" src="../assets/videos/video.mp4" type="video/mp4"/>
</video>
</vue-plyr>
<h3>Саша</h3>
</div>
<div class="cell">
<vue-plyr :options="options">
<video playsinline data-poster="poster.jpg" class="js-player">
<source size="720" src="../assets/videos/video2.mp4" type="video/mp4"/>
</video>
</vue-plyr>
<!-- <video playsinline controls data-poster="/path/to/poster.jpg">
<source src="../assets/videos/video2.mp4" type="video/mp4" />
</video> -->
<h3>Миранда</h3>
</div>
<div class="cell">
<vue-plyr :options="options">
<video playsinline data-poster="poster.jpg" class="js-player">
<source size="720" src="../assets/videos/video3.mp4" type="video/mp4"/>
</video>
</vue-plyr>
<!-- <video playsinline controls data-poster="/path/to/poster.jpg">
<source src="../assets/videos/video3.mp4" type="video/mp4" />
</video> -->
<h3>Матвей</h3>
</div>
<div class="cell">
<vue-plyr :options="options">
<video playsinline data-poster="poster.jpg" class="js-player">
<source size="720" src="../assets/videos/video4.mp4" type="video/mp4"/>
</video>
</vue-plyr>
<!-- <video playsinline controls data-poster="/path/to/poster.jpg">
<source src="../assets/videos/video4.mp4" type="video/mp4" />
</video> -->
<h3>Болат</h3>
</div>
</flickity>
<div class="control-buttons">
<span @click="previous()" style="margin-top: 0;" class=" fas fa-angle-left" id="testimonialbtn"></span>
<span @click="next()" style="margin-left: 20px;" class="fas fa-angle-right" id="testimonialbtn"></span>
</div>
</div>
</div>
</div>
<div class="headLiner">
<div class="container-fluid h-100">
<div class="headlinerConsultation text-center mx-auto">
<div class="row no-gutters align-items-center h-100 ">
<div class="col">
<h2 class="whiteHeader">Нужна консультация?</h2>
<h2 class="greyHeader">Записывайся на консультацию и получи 20% скидки на первый месяц обучения!
</h2>
<button class="register">Получить скидку</button>
</div>
</div>
</div>
</div>
</div>
<div class="faq">
<div class="container">
<div id="container-width">
<h1>FAQ</h1>
<ul class="accordion-list">
<li>
<h3>Что нужно что бы приступить к занятиям?</h3>
<div class="answer">
<p>Для этого нужен компьютер, планшет или телефон. Уроки проходят онлайн и для подключения к живому уроку вам нужно зарегистрироваться в нашей платформе.</p>
</div>
</li>
<li>
<h3>Есть ли в возрастные ограничения?</h3>
<div class="answer"><p>Нет, мы разделяем только по уровню владения английским. У нас занимаются и дети и взрослые. </p></div>
</li>
<li>
<h3>Сколько длится занятие?</h3>
<div class="answer"><p>Продолжительность одного урока 1 академический час. Мы делаем уроки насыщенными и ёмкими, чтобы тебе легко было выделить время на занятия и нагрузка была посильной. </p></div>
</li>
<li>
<h3>Когда я могу начать?</h3>
<div class="answer"><p>Начать вы можете в любое время! Наши преподаватели всегда готовы и ждут новых студентов. </p></div>
</li>
</ul>
</div>
</div>
</div>
<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>
【问题讨论】：
<vue-plyr :options="options"> ... 数据变量options 定义在哪里？
【参考方案1】：
包含="options" 的行导致错误。您的 script 块中没有这样的方法、数据或计算属性，但在您的 template 中引用了它。
【讨论】：
以上是关于Vue警告]：属性或方法“选项”未在实例上定义，但在render.Vue js问题期间引用的主要内容，如果未能解决你的问题，请参考以下文章
为啥我看到 Vue 警告：“属性或方法“msg”未在实例上定义，但在渲染期间被引用...”
[Vue 警告]：属性或方法“游戏”未在实例上定义，但在渲染期间引用
[Vue 警告]：属性或方法未在实例上定义，但在渲染期间引用