Это мой первый проект в vue, и мне очень трудно найти функциональные примеры в vue. Я пытаюсь создать компонент заголовка, который показывает список ссылок, некоторые из которых мне нужны в виде раскрывающегося списка ссылок. Вот мой компонент
<template>
<nav class='header'>
<ul class='menu'>
<li class='menu-item'>
<a class='menu-link' href="https://www.esthima.fr/societe">QUI SOMMES-NOUS ?</a>
</li>
<li class="menu-item menu-item-dropdown" v-on:click="toggle('ranking')" v-bind:class="{'open' : dropDowns.ranking.open}">
<a class='menu-link menu-link-toggle'>QUAND L’ANIMAL S’EN VA</a>
<ul class='dropdown-menu'>
<li class='dropdown-menu-item'>
<a class='dropdown-menu-link'>TEST 1</a>
</li>
<li class='dropdown-menu-item'>
<a class='dropdown-menu-link'>TEST 2</a>
</li>
</ul>
</li>
<li class='menu-item'>
<a class='menu-link' href="https://boutique.esthima.fr">URNES ANIMAUX</a>
</li>
</ul>
<img src="../assets/logoesthima.png">
<a>NOS SERVICES</a>
<a href="https://boutique.esthima.fr/">URNES ANIMAUX</a>
<a>TARIFS ET DEVIS</a>
<a>NOUS CONTACTER</a>
</nav>
</template>
<script>
export default{
let header = new Vue({
al: '.header',
ready: function()
{
var self = this
window.addEventListener('click', function(e){
if (! e.target.parentNode.classList.contains('menu__link--toggle'))
{
self.close()
}
}, false)
},
data: {
dropDowns: {
ranking: { open: false}
}
},
methods: {
toggle: function(dropdownName)
{
//alert(dropdownName)
this.dropDowns[dropdownName].open = !this.dropDowns[dropdownName].open;
},
close: function()
{
for (dd in this.dropDowns)
{
this.dropDowns[dd].open = false;
}
}
}
})
}
</script>
Я следую нескольким примерам, которые я нашел, и документации, и все они возвращают одну и ту же ошибку загрузки консоли с объявлением внутри сценария «new Vue», независимо от того, объявить его напрямую или оставить как константу. Кто-то, кто может заставить меня увидеть мою ошибку. Заранее большое спасибо!