javascript - 数据集未定义 - 这在 vue.js 中

Question

我想使用 dataset在 Vue 中获取元素的数据属性的规则。我是这样做的:

<ul id="filter">
        <li><a class="filter-item" v-on:click="filterItems" data-letter="a" href="#">A</a></li>
        <li><a class="filter-item" v-on:click="filterItems" data-letter="b" href="#">B</a></li>
        <li><a class="filter-item" v-on:click="filterItems" data-letter="c" href="#">C</a></li>
      </ul>


var titleFilter = new Vue({
      el: '#filter',
      methods: {
        filterItems: function(e){
          e.preventDefault();
          var whichFilterItem = this.dataset.letter;
          console.log(whichFilterItem);
        }
      }
    });

在我的控制台中，我得到:

Uncaught TypeError: Cannot read property 'letter' of undefined

我正在引用 MDN:https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

它说只需使用 dataset和“通过数据后的属性名称部分获取属性”但是当我这样做时它不起作用；不起作用。

我最初的想法是它与事件目标有关，它实际上是在获取 <li>。 .当我控制台日志 e.target它给了我 anchor 标签。这是正确的

Answer 1

当您执行 this.dataset 时，您正在尝试获取 vue 实例数据的数据集属性。您在实例上没有此数据。

您正在尝试获取被单击元素的属性。您可以通过事件变量访问元素。

像这样:

var titleFilter = new Vue({
      el: '#filter',
      methods: {
        filterItems: function(e){
          e.preventDefault();
          var whichFilterItem = e.target.dataset.letter;
          alert(whichFilterItem);
        }
      }
    });

作为补充，Vue accepts modifiers on its listeners .

您在函数内部使用了 e.preventDefault()。如果像这样在 v-on:click 指令上使用修饰符，则可以忽略它:

v-on:click.prevent="filterItems"