VueJS Read Dom Attributes

Question

I want to get the href attribute to the button click event.

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

Main.JS Files

new Vue({
el: 'body',

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

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

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

Target event does not select a element. It selects the clicked element.

For more info: https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget — Mahmud Adam, Sep 06 '16 at 20:58

score 19 · Accepted Answer · answered Sep 06 '16 at 20:48

19

You want event.currentTarget, not event.target. Here's a fiddle of the situation: https://jsfiddle.net/crswll/553jtefh/

answered Sep 06 '16 at 20:48

Bill Criswell

32,161
7
75
66

Does not exist a *Vue.js* way of doing this? – Jordi Nebot Jun 02 '17 at 14:27
2

No. Ideally you'd never need to touch the the DOM, though. That href should be somewhere in data for you to access in a better way. This question is likely a setup for something a little more interesting. – Bill Criswell Jun 02 '17 at 15:10

score 7 · Answer 2 · answered Jul 16 '17 at 12:41

7

This is "Vue way". Vue is about reusable components. So, create component first:

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

Now add custom attribute and read its value:

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

answered Jul 16 '17 at 12:41

1

But what does that mean? To have vue component for every html element? Why is such a hassle in vuejs to get html attribute? – FrenkyB Dec 10 '19 at 08:56
@FrenkyB Vue does not require every element to be a Vue element, but only a vue app/component with sub components listed or a custom render func will be able to render custom vue tags. they are not added to html's manifest of valid tags, they are parsed and rendered as raw html tags. so to use a rather large portion of vue's functionality, you must be nested in another vue. as a quick hack, i like to make the body element a vue that does nothing except holds component listings, then i can use Vue anywhere – Jody Sowald Aug 31 '21 at 13:03

score 4 · Answer 3 · answered Jul 22 '19 at 14:45

var app = {
        func: function (event) {
            console.log(event.currentTarget.id);//this will get whole html tag
            console.log(event.currentTarget.href);//this will show href value
        }
    }
    // Apps  
    var app_vue = new Vue({
        data: app,
    }).$mount("#app_vue");

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app_vue" v-cloak  class="card" >
    <a v-on:click.prevent="func" href="/user/all/2">
        <i class="fa fa-edit"></i>
        <span>Get Data</span>
    </a>
</div>

VueJS Read Dom Attributes

3 Answers3

Linked