Exploring the Method of Accessing data-* Attributes in Vue.js

Question

Exploring the Method of Accessing data-* Attributes in Vue.js

I have a button that, when clicked, triggers a modal to open. The content displayed in the modal is determined by the data attributes passed to the button.

Here is my button:

<button class="btn btn-info" data-toggle="modal"
  data-target="#someModal" :data-id=item.id :data-name=item.name>
  Edit
</button>

Within the modal, there are buttons that, when clicked, should execute a vuejs function with a parameter based on the data attribute.

Modal button code:

<div class="modal-footer">
    <button type="button" class="btn btn-danger"
        @click.prevent="deleteItem()" data-dismiss="modal">
        Delete
    </button>
    <button type="button" class="btn btn-warning" data-dismiss="modal">
        <span class='glyphicon glyphicon-remove'></span> Close
    </button>
</div>

In this scenario, a parameter needs to be passed to the deleteItem() function, which corresponds to the data-id obtained from the preceding button.

Modal Code:

    <div id="deleteModal" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Delete</h4>
                </div>
                <div class="modal-body">
                    <div class="deleteContent">
                        Are you sure you want to delete?
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn actionBtn btn-danger"
                            @click.prevent="deleteItem()"
                            data-dismiss="modal">
                            Delete <span id="footer_action_button"
                                class='glyphicon glyphicon-trash'> </span>
                        </button>
                        <button type="button" class="btn btn-warning"
                            data-dismiss="modal">
                            <span class='glyphicon glyphicon-remove'></span> Close
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

javascript vue.js vuejs2 custom-data-attribute

Answer 1

Answer №1

Coding Example

<button type="button" @click.prevent="deleteItem()" :data-id="1" data-dismiss="modal">
Delete <span id="footer_action_button" class='glyphicon glyphicon-trash'> </span>
</button>

JavaScript Function

methods:{
  deleteItem: function(){
    var id = event.target.getAttribute('data-id');
    console.log(id) // 1
  }
}

Check out the live demo here

Answer 2

Coding Example

<button type="button" @click.prevent="deleteItem()" :data-id="1" data-dismiss="modal">
Delete <span id="footer_action_button" class='glyphicon glyphicon-trash'> </span>
</button>

JavaScript Function

methods:{
  deleteItem: function(){
    var id = event.target.getAttribute('data-id');
    console.log(id) // 1
  }
}

Check out the live demo here

Answer 3

Answer №2

If you want to dive deep into a component's properties, try adding console.log(this) inside a component function and then trigger that function with a button click.

(Check out the image below for an example of what gets printed to the console when using console.log.)

This approach allows you to access properties like the $el property, which holds the DOM element. For instance, you could enhance your component by including the following code in the mounted lifecycle hook:

mounted() {
  console.log(this);
  this.myAttribute = this.$el.getAttribute('data-attribute-name');
},

In this scenario, you would define `myAttribute` within your data object, possibly overwriting its initial value during the component's mounted() lifecycle hook:

// Set up a default value in the data method.
// This will be updated in the mounted() lifecycle hook.
data() {
  return {
    myAttribute: 'defaultvalue'
  }
}

For more information on Vue.js (v2) lifecycle hooks, check out the official documentation here.

Here is an example output from running console.log(this) within a component:

Answer 4

If you want to dive deep into a component's properties, try adding console.log(this) inside a component function and then trigger that function with a button click.

(Check out the image below for an example of what gets printed to the console when using console.log.)

This approach allows you to access properties like the $el property, which holds the DOM element. For instance, you could enhance your component by including the following code in the mounted lifecycle hook:

mounted() {
  console.log(this);
  this.myAttribute = this.$el.getAttribute('data-attribute-name');
},

In this scenario, you would define `myAttribute` within your data object, possibly overwriting its initial value during the component's mounted() lifecycle hook:

// Set up a default value in the data method.
// This will be updated in the mounted() lifecycle hook.
data() {
  return {
    myAttribute: 'defaultvalue'
  }
}

For more information on Vue.js (v2) lifecycle hooks, check out the official documentation here.

Here is an example output from running console.log(this) within a component:

Answer 5

Answer №3

Another way to pass the "item.id" is shown below:

<span @click="removeItem(item.id)">Remove</span>

Answer 6

Another way to pass the "item.id" is shown below:

<span @click="removeItem(item.id)">Remove</span>

Answer 7

Answer №4

One straightforward approach is to attach the ID to the delete button

  <button type="button" class="btn btn-danger"
        @click.prevent="deleteItem(this)" :data-id=item.id data-dismiss="modal">
        Delete
   </button>

Answer 8

One straightforward approach is to attach the ID to the delete button

  <button type="button" class="btn btn-danger"
        @click.prevent="deleteItem(this)" :data-id=item.id data-dismiss="modal">
        Delete
   </button>

Answer 9

Answer №5

If you need to access the custom data attributes (data-*) on elements, you can utilize the dataset read-only property.

For a practical demonstration, you can visit StackBlitz.

Here's an example using HTML:

<button
  type="button"
  @click.prevent="deleteItem"
  :data-id="6904888"
  :data-name="'Penny Liu'"
>
  Delete
</button>

And here is how you can handle this in Vue:

methods: {
  deleteItem(event) {
    const { id, name } = event.target.dataset;
  },
},

Answer 10

If you need to access the custom data attributes (data-*) on elements, you can utilize the dataset read-only property.

For a practical demonstration, you can visit StackBlitz.

Here's an example using HTML:

<button
  type="button"
  @click.prevent="deleteItem"
  :data-id="6904888"
  :data-name="'Penny Liu'"
>
  Delete
</button>

And here is how you can handle this in Vue:

methods: {
  deleteItem(event) {
    const { id, name } = event.target.dataset;
  },
},

Exploring the Method of Accessing data-* Attributes in Vue.js

Answer №1

Coding Example

JavaScript Function

Check out the live demo here

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Which is better: JavaScript, Json, or Html?

Ways to trigger a popup when a link is clicked in Vue.js?

What are the reasons for the dynamic exclusion of an element in Angular?

Organizing Vue.js components into separate files for a cleaner view model architecture

I am having difficulty retrieving information from the Laravel API

Unfortunately, I am unable to utilize historical redirection in React

Ways to update all URLs on a page with ajax functionality

Separate the iframe sessions

Using the Github API in javascript, store an image as an image by saving its base64 Data URL

I would like to automatically log out when closing the tab in Mozilla, Internet Explorer 8.0, or Chrome

Issue with jQuery animation: Background color does not change upon scrolling

Display a webpage in thumbnail form when hovering the mouse over it

Challenges with inferring return values in Typescript generics

Is the promises functionality respected by the Nextjs API?

I want the navigation bar to appear only upon scrolling, but when I refresh the page it is already visible, and then vanishes as I start scrolling

The content located at “http://localhost:3000/public/static/” was restricted because of a mismatch in MIME type (text/html) which triggered the X-Content-Type-Options:nosniff protocol

Attempted to utilize zipstatic but received no feedback

Encountering an issue while trying to initiate npm start command for a ReactJS application on an

AngularJS Unleashed: The Art of Displaying Dynamic AJAX

Hold off on moving forward until the content has been loaded using ajax within loops