Exploring VueJS: Accessing Dom Attributes

Question

Exploring VueJS: Accessing Dom Attributes

How can I retrieve the href attribute when a button is clicked?

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

JavaScript File (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');
    },
}
});

The target event does not select the a element. It selects the clicked element instead.

javascript vue.js vue-component

Answer 1

Answer №1

It is important to use event.currentTarget instead of event.target. You can check out an example here: https://jsfiddle.net/crswll/553jtefh/

Answer 2

It is important to use event.currentTarget instead of event.target. You can check out an example here: https://jsfiddle.net/crswll/553jtefh/

Answer 3

Answer №2

Vue emphasizes the use of reusable components, which is known as the "Vue way". To implement this approach, you need to create a component first:

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

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

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

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

Next, you can add custom attributes to the component and access their values:

<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']) // Accessing custom attribute value from $attrs object
    }
  })

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

Answer 4

Vue emphasizes the use of reusable components, which is known as the "Vue way". To implement this approach, you need to create a component first:

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

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

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

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

Next, you can add custom attributes to the component and access their values:

<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']) // Accessing custom attribute value from $attrs object
    }
  })

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

Answer 5

Answer №3

var obj = {
  method: function(event) {
    console.log(event.currentTarget.id); //retrieves the entire html tag
    console.log(event.currentTarget.href); //displays the href value
  }
}
// Objects  
var new_obj = new Vue({
  data: obj,
}).$mount("#new_obj");

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

Answer 6

var obj = {
  method: function(event) {
    console.log(event.currentTarget.id); //retrieves the entire html tag
    console.log(event.currentTarget.href); //displays the href value
  }
}
// Objects  
var new_obj = new Vue({
  data: obj,
}).$mount("#new_obj");

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

Exploring VueJS: Accessing Dom Attributes

Answer №1

Answer №2

Answer №3

Similar questions

Turn off the ability to view the content of .css and .js files within the browser

Determine if a Vimeo video successfully loads within an iframe using jQuery

Building an Angular 4 universal application using @angular/cli and integrating third-party libraries/components for compilation

Error message: "Oops! Looks like the Mix manifest is missing in Laravel Vue.js setup

Multiple loop in Node.js with Selenium

Finding the common dates between two date arrays in Node.js

The input box fails to show larger values on the user's page

Embracing right-to-left (RTL) languages

Nuxt prevents the importing of client-side scripts during server-side rendering

Using CSS transition on the height property does not produce the desired effect

JavaScript allows users to input an array name themselves

What is the best way to incorporate the 'autoskip' functionality into chartjs?

When using Angular's ng-repeat, data binding may not work properly for arrays that are created dynamically

Creating a versatile function for rendering content

"Displaying Undefined Content when an Incorrect Value is Added, but functioning correctly with the right

Tips on how to toggle the class of one specific element without affecting others

Deciphering HTML encoding for text fields

The issue of numbers not being properly summed in Node.js

The equivalent of ESM for resolving modules using the `createRequire` function with a specified

Prevent scrolling in AngularJS model popups