Vue js点击获取html5属性答案

【问题标题】：Vue js on click get html5 attributeVue js点击获取html5属性
【发布时间】：2017-11-03 15:00:40
【问题描述】：

我正在使用 vuejs 最新版本做一个项目。在这个项目中，我想在点击事件上获取与 vue 关联的 html5 属性。

我的按钮代码是

<a href="javascript:" class="btn btn-info btn-xs" @click="editModal"
                                           data_id="{{$staff->id}}">
          <i class="fa fa-pencil"></i>
</a>

我的js是

var staffModal = new Vue({
el: '#app',
methods: {
    editModal: function(){
        console.log(this.data_id);
    }
}});

在我的控制台中，我没有定义。如何获得正确的价值。

【问题讨论】：

标签： javascript vue.js vuejs2

【解决方案1】：

MouseEvent 实例作为第一个参数传递给单击事件处理程序。使用getAttribute 函数访问属性。 MouseEvent.target 将指向 <i> 和 MouseEvent.currentTarget 指向 <a>（事件侦听器附加到的元素）。将您的 editModal 方法更改为：

editModal: function(e) {
    console.log(e.currentTarget.getAttribute('data_id'));
}

顺便说一句：使用 -（破折号）而不是 _（下划线）来创建数据属性：正确的是 data-id 而不是 data_id

【讨论】：

问题已解决。它将是 currentTarget 而不是 target。参考stackoverflow.com/a/39357594/4555551
@IftakharulAlam thx，更新了答案，没有注意到您的问题中有嵌套的
尝试使用data-而不是data_，您将能够使用e.target.dataset

【解决方案2】：

您的代码中有一些错误。让我们从 HTML 代码开始。

当你需要插入一个属性时，你必须使用 v-bind。所以你有两种方法可以做到这一点。使用v-bind:attribute="expression" 或简写:attribute="expression"。用attribute="{{ expression }}"肯定不行。

另一个重要的事情是，要使用自定义属性名称，您应该使用data-custom-attribute-name 而不是data_custom-attribute-name。

<div id="app">
  <a
    href="javascript:"
    class="btn btn-info btn-xs"
    @click="editModal"
    :data-id="staff.id"
    :data-my-amazing-custom-attribute="staff.name">
    Click me!
  </a>
</div>

现在，让我们去 JS。从你的问题我不知道 $staff 变量来自哪里，所以我做了一个改编来演示。

new Vue({
  el: '#app',
  methods: {
    editModal: function(event){
      // Here you will be able to see all the
      // custom attributes in camelCase
      console.log(event.target.dataset);
      console.log('ID:', event.target.dataset.id);
      console.log('Name:', event.target.dataset.myAmazingCustomAttribute);
    }
  },
  data () {
    return {
      staff: {
        id: 'some id',
        name: 'Name of my amazing custom attribute'
      }
    }
  }
});

您可以在此处查看工作版本：https://jsfiddle.net/6v3wyoh6/

希望对你有帮助！

【讨论】：

有时它会返回正确的值，有时会返回undefined
@IftakharulAlam，在我提供的示例中？
对我来说，this.$el.dataset.myAmazingCustomAttribute 工作

【解决方案3】：

从数据属性中获取id 很好，并且会起作用，但我的问题是，为什么？您正在使用 Vue，所以使用 Vue。你可以直接传递id。

<a class="btn btn-info btn-xs" @click="editModal({{$staff->id}})">
  <i class="fa fa-pencil"></i>
</a>

你的 Vue 代码变成了

methods: {
    editModal: function(id){
        console.log(id);
    }
}

现在您无需担心弄清楚 data 属性是什么。这是 DOM 操作，在使用 Vue 时您通常应该避免，因为它是不必要的。

注意：我假设您在这里使用的是 laravel 或类似的东西，这样当 {{$staff->id}} 被渲染时，它就会被渲染为您的 id。

【讨论】：

【解决方案4】：

这里是vue docs 的链接。向事件处理程序发出值的正确方法。

    <button v-on:click="$emit('enlarge-text', 0.1)">
       Enlarge text
    </button>

【讨论】：