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

我想使用

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);
        }
      }
    });

var滴定过滤器=新Vue({
el:“#过滤器”，
方法：{
过滤器项：函数（e）{
e、 预防默认值（）；
var whichfilteriem=this.dataset.letter；
console.log（whichfilteriem）；
}
}
});

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

未捕获的TypeError:无法读取未定义的属性“字母”

我正在引用MDN：

它说只需使用

dataset

和“通过数据后面的属性名部分获取属性-”但当我这样做时，它不会；不行

---

我最初的想法是它与事件目标有关，它实际上得到了

。当我记录控制台日志

e.target

时，它会给我锚定标签。这是正确的

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

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

像这样：

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

作为补充

您正在函数中使用

e.preventDefault（）

。如果使用

v-on:click

指令上的修饰符，则可以忽略此问题，如下所示：

v-on:click.prevent="filterItems"

---

您必须将数据集添加到vue数据中。执行此操作时，您将尝试获取vue实例的

dataset

属性。实例上没有此数据。如果希望从单击的元素中选取值，可以执行以下操作：

e.target.dataset.letter

。这应该行得通。这行得通，但我肯定会建议一种更好的OP方法。另外，

currentTarget

而不是

target

会更安全（以防真正的标记中有子标记）。是的，我自己不会使用这个。最好的方法是使用v-model，我不知道如何将它应用到锚定标记上，而我一直在思考：这就是我认为OP最终会结束的地方。