Question

我正在使用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);
    }
}});

在我的控制台中，我得到了不确定。如何获得正确的价值。

Answer 1

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

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

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

Answer 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/

希望它有所帮助！

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

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

注意：我假设您正在使用laravel或类似的东西，以便在呈现{{$staff->id}}时呈现为id。

Answer 4

此处是指向https://blog.cloudflare.com/the-complete-guide-to-golang-net-http-timeouts/的链接。向事件处理程序发送值的正确方法。

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

Vue js on click get html5属性

4 个答案: