title: dataset is undefined - this in vue.js
body: <p>I want to use the <code>dataset</code> rule to get the data-attribute of an element in Vue. I'm doing it like so:</p>
  
  <pre><code>&lt;ul id="filter"&gt;
          &lt;li&gt;&lt;a class="filter-item" v-on:click="filterItems" data-letter="a" href="#"&gt;A&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a class="filter-item" v-on:click="filterItems" data-letter="b" href="#"&gt;B&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a class="filter-item" v-on:click="filterItems" data-letter="c" href="#"&gt;C&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
  
  
  var titleFilter = new Vue({
        el: '#filter',
        methods: {
          filterItems: function(e){
            e.preventDefault();
            var whichFilterItem = this.dataset.letter;
            console.log(whichFilterItem);
          }
        }
      });
  </code></pre>
  
  <p>In my console I am getting:</p>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot read property 'letter' of undefined</p>
  </blockquote>
  
  <p>I'm referencing MDN: <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes</a></p>
  
  <p>It says to simply use <code>dataset</code> and "get the property by the part of the attribute name after data-" but when I do that it doesn;t work. </p>
  
  <p>My initial thought was that it had to do with the event target and it was actually getting the <code>&lt;li&gt;</code>. When I console log <code>e.target</code> it gives me the anchor tag. which is correct</p>