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

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

未捕获的TypeError：无法读取属性＆＃39;字母＆＃39;未定义的

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

它说只需使用dataset和＆＃34;在数据之后通过属性名称的部分获取属性 - ＆＃34;但是，当我这样做时，它不起作用。

我最初的想法是它与事件目标有关，它实际上是<li>。当我登录日志e.target时，它会给我一个锚标记。这是正确的

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"

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

1 个答案: