ошибка при загрузке скрипта vue для выпадающего списка - PullRequest
Новая
       119

ошибка при загрузке скрипта vue для выпадающего списка

0 голосов
/ 06 августа 2020

Это мой первый проект в 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», независимо от того, объявить его напрямую или оставить как константу. Кто-то, кто может заставить меня увидеть мою ошибку. Заранее большое спасибо!

1 Ответ

2 голосов
/ 06 августа 2020

Вы должны изменить код, чтобы он был правильно структурированным однофайловым компонентом: 

<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" @click="toggle('ranking')" :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
{
  mounted()
  {
    window.addEventListener('click', (evt) =>
    {
      if (! e.target.parentNode.classList.contains('menu__link--toggle'))
      {
        this.close()
      }
    }, false)
  },
  
  data() 
  {
    return {
      dropDowns: 
      {
        ranking: 
        { 
          open: false
        }  
      }
    };
  },
  
  methods: 
  {
    toggle(dropdownName)
    {
      //alert(dropdownName)
       this.dropDowns[dropdownName].open = !this.dropDowns[dropdownName].open;
    },
    
    close()
    {
      for (dd in this.dropDowns)
      {
        this.dropDowns[dd].open = false;    
      }
    }
  }
};
</script>
...