How to get the values of data-* attributes in vuejs

Question

I have a button which when clicked opens up a modal, and the content to show in the modal is based on the data-attributes passed to the button.

My button,

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

In my modal, I have some buttons and when clicked I should call a vuejs function with a parameter, which is the data-attribute.

My modal button,

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

Here I have to pass a parameter to deleteItem(), and that parameter is the data-id which I get from the button above.

Code for Modal

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

Fluoride

Can you post the code for the modal you're using? – Rigatoni

Posted the code for modal, I need to pass a parameter to the function in modal footer button. – Fluoride

When you pass props as kebab case for the component, Vue js changes them to camel case, so data-id is available as this.dataId in your component – Limpkin

Answer 1

HTML

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

Vue

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

Here is the demo https://codepen.io/maab16/pen/jONZpVG

Coffin

Answer 2

I recommend doing a console.log(this) inside a component function, then calling that function on a button click so you can inspect all the properties of the component.

(See the attached image, below, for example output of the above console.log statement.)

This shows you that amongst others, you have access to the $el property holding the DOM element. Which opens up a whole lot of possibilities, such as being able to add the following code to the mounted lifecycle hook of your component:

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

And for this example, this.myAttribute would have been defined in (for example) your data property:

// This value gets attributed during an earlier lifecycle hook.
// It will be overridden in the component's mounted() lifecycle hook.
data() {
  return {
    myAttribute: 'defaultvalue'
  }
}

Vue.js (v2) Lifecycle hooks documentation

---

Example output when executing console.log(this) inside a component:

Sandrocottus

It is possible to use this.$el.getAttribute('data-*') function in beforeMount hook. In such case you can specify null for properties instead of default values in data function. – Tirza

For any 1.x users, compiled looks like the earliest lifecycle hook with this.$el populated such that you can use it like this. – Kaddish

Answer 3

You can pass the "item.id" like this too:

<button type="button" @click="deleteItem(item.id)">Delete</button>

Connect

Answer 4

A simple option will be bind the id to the delete button as well

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

Flexile

When add this, i get the following error [Vue warn]: Property or method "item" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in root instance) – Fluoride

make sure the scope extends the button as well – Flexile

Yea the button is in the scope itself. – Fluoride

can you create a jsfiddle? – Flexile

Answer 5

You can make use of the dataset read-only property to retrieve the values of custom data attributes (data-*) on elements.

Here is a live demonstration available on StackBlitz.

HTML

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

Vue

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

Tailor