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:

https://i.sstatic.net/yvMcP.png

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:

https://i.sstatic.net/yvMcP.png

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

Issues encountered during the installation of Electron JS

Upon reloading, the dynamically generated table does not appear accurately

The scroll function within the inner div is malfunctioning on the Firefox browser

An error was encountered while attempting to proxy the request [HPM]

Retrieving text data in Controller by utilizing jQuery AJAX request

Express API encounters an issue with multer and body-parser as req.file is undefined

What is the method for retrieving the name of the 'Autocomplete' component in Material UI?

Error in Vue Google Maps: Marker not defined

Guide on implementing file download and saving to the downloads directory in a Vue.js and Laravel 5.4 application

The duration of time separating each individual post

Is it the same item in one situation, but a completely different item in another?

Failure to register Express Route

When accessing a page from a link, JavaScript sometimes does not immediately execute on the first attempt

When clicked, the menu disappears successfully with the "show" functionality, but unfortunately, the "hide" feature is not working as intended

Using React and Redux to update the state of an object with the current state

What is the best way to retrieve a specific number of documents from MongoDB?

Can you confirm if this is the most efficient method for loading google-analytics and jQuery?

Combining Select Options with AngularJS

Leveraging ng-class with an Angular $scope attribute

Can jQuery script be used within a WordPress page for inline execution?