为 drop-down 列表加载 vue 脚本时出错

Question

这是我在 vue 中的第一个项目，我很难在 vue 中找到功能示例。我正在尝试制作一个显示链接列表的 header 组件，其中一些我需要成为 drop-down 链接列表。这是我的组件

<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>

我正在关注我发现的几个例子和文档，它们都是 return 与“新 Vue”脚本中的声明相同的控制台加载错误，无论我是直接声明还是保留它作为常数。可以让我看到我的错误的人。非常感谢您！

Answer 1

您应该将代码更改为结构正确的 Single-File 组件：

<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>

为 drop-down 列表加载 vue 脚本时出错

error in loading the vue script for a drop-down list

vue.js

vue-component

dropdown

vuejs3