VueJS 读取 Dom 属性

Question

我想获取按钮单击事件的 href 属性。

 <a v-on:click.prevent="func($event)" href="/user/all/2">
    <i class="fa fa-edit"></i>
    <span>Get Data</span>
</a>

Main.JS 文件

new Vue({
el: 'body',

methods: {
    func: function (event) {
        element = event.target;

        console.log(element); // Output : Select span|i|a element

        href = element.getAttribute('href');
    },
}
});

目标事件不选择元素。它选择单击的元素。

原文由 Ramazan APAYDIN 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你想要 event.currentTarget ，而不是 event.target 。这是情况的一个小提琴： https ://jsfiddle.net/crswll/553jtefh/

原文由 Bill Criswell 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这就是“Vue 方式”。 Vue 是关于可重用组件的。所以，首先创建组件：

 <script src="https://unpkg.com/vue"></script>

<div id="app">
  <my-comp></my-comp>
</div>

<script>
  // register component
  Vue.component('my-comp', {
    template: '<div>Just some text</div>'
  })

  // create instance
  new Vue({
    el: '#app'
  })
</script>

现在添加自定义属性并读取其值：

 <script src="https://unpkg.com/vue"></script>

<div id="app">
  <my-comp my-attr="Any value"></my-comp>
</div>

<script>
  Vue.component('my-comp', {
    template: '<div>aaa</div>',
    created: function () {
      console.log(this.$attrs['my-attr']) // And here is - in $attrs object
    }
  })

  new Vue({
    el: '#app'
  })
</script>

原文由 user6748331 发布，翻译遵循 CC BY-SA 3.0 许可协议