Vue js on click get html5 attribute

ulmd4ohb  于 2023-10-23  发布在  Vue.js
关注(0)|答案(4)|浏览(132)

我正在做一个使用vuejs最新版本的项目。在这个项目中,我想让html5属性关联vue的点击事件。
我的按钮代码是

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

在我的console中,我得到undefined。如何获得正确的价值

r6vfmomb

r6vfmomb1#

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

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

顺便说一句:使用-(破折号)not _(下划线)创建数据属性:正确的是data-id而不是data_id

kmbjn2e3

kmbjn2e32#

你的代码中有些地方出错了。让我们从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/
希望能帮上忙!

ldfqzlk8

ldfqzlk83#

从数据属性中获取id是可以的,并且可以工作,但我的问题是,为什么?你使用的是Vue,所以 use 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);
    }
}

现在您不需要担心弄清楚数据属性是什么。这是DOM操作,在使用Vue时通常应该避免,因为它是不必要的。
注意:这里我假设你使用的是laravel或类似的东西,当{{$staff->id}}被渲染时,它被渲染为你的id

ktecyv1j

ktecyv1j4#

这里是vue docs的链接。将值发送给eventhandler的正确方式。

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

相关问题