title: Migrating from vue1 to vue2
body: <p>I'm trying to migrate this sample dropdown menu from vue1 to vue2.</p>
  
  <p><a href="http://vuejsexamples.com/vue-dropdown-menu/" rel="nofollow noreferrer">http://vuejsexamples.com/vue-dropdown-menu/</a></p>
  
  <p>I've changed the <code>ready</code> method to <code>mounted</code>, removed the <code>json</code> filter and rewrote the for loop in <code>close</code> because it caused errors in the console.</p>
  
  <p>Right now there aren't any errors while I run this, but still, the dropdown doesn't work properly - it does not close when I click outside of the menu.
  Can anybody help with migrating this?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>new Vue({
    el: '#menu',
    
    mounted: 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)
      {
         this.dropDowns[dropdownName].open = !this.dropDowns[dropdownName].open;
      },
      
      close: function()
      {
          for (var i = 0; i &lt; this.dropDowns.length; i++) {
            this.dropDowns[dd].open = false;
          }
      }
    }
    
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    margin: 2rem 0;
  }
  
  ul {
    list-style: none;
  }
  
  .menu {
    display: flex;
  }
  .menu__item {
    position: relative;
    padding-right: 3rem;
  }
  .menu__link {
    text-transform: uppercase;
  }
  .menu__icon {
    margin: 0 !important;
  }
  
  .open .dropdown-menu {
    display: block;
  }
  
  .dropdown-menu {
    font-size: 0.9rem;
    position: absolute;
    min-width: 130px;
    top: 2.2rem;
    display: none;
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
  }
  
  .dropdown-menu__item:first-child .dropdown-menu__link {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
  }
  
  .dropdown-menu__item:last-child .dropdown-menu__link {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
  }
  
  .dropdown-menu__link {
    display: block;
    padding: 1rem;
    color: blue;
    background-color: #fafafa;
  }
  .dropdown-menu__link:hover {
    color: green;
    background-color: #ccc;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://unpkg.com/vue@2.4.2/dist/vue.min.js"&gt;&lt;/script&gt;
  &lt;div id="menu"class="row"&gt;  
    &lt;ul class="menu"&gt;
      &lt;li class="menu__item"&gt;
          &lt;a class="menu__link" href="#"&gt;Home&lt;/a&gt;
      &lt;/li&gt;
  
      &lt;li class="menu__item menu__item--dropdown" v-on:click="toggle('ranking')" v-bind:class="{'open' : dropDowns.ranking.open}"&gt;
          &lt;a class="menu__link menu__link--toggle" href="#"&gt;
              &lt;span&gt;Rangliste&lt;/span&gt;
              &lt;i class="menu__icon fa fa-angle-down"&gt;&lt;/i&gt;
          &lt;/a&gt;
  
          &lt;ul class="dropdown-menu"&gt;
              &lt;li class="dropdown-menu__item"&gt;
                  &lt;a class="dropdown-menu__link" href="#"&gt;Aktuelle Runde&lt;/a&gt;
              &lt;/li&gt;
  
              &lt;li class="dropdown-menu__item"&gt;
                  &lt;a class="dropdown-menu__link" href="#"&gt;Siegerliste&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  
      &lt;li class="menu__item"&gt;
          &lt;a class="menu__link" href="#"&gt;Belegungskalender&lt;/a&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
    
    &lt;pre&gt;{{ dropDowns }}&lt;/pre&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>