Getting a data attribute value

Im in the middle of adding VUE to my project and I have a button which contains a data-attribute called “data-url-desc”.

I want to set a data value in my Vue file to the value of this data attribute.

The button is created in the Vue file but the value of the data attribute is set via Jquery.

<button type="button" id="btn-save" class="btn btn-primary " data-url-desc="/category/network-cable-x-10" >
                                Update Category
                           </button>

How can i set the value of the data attribute to a data variable so i can use it in an axios request?

First, read this for future reference so we can read your code better:

Then, about your problem:

  1. adda ref to the button
<button ref="theButton" type=“button” data-url-desc=”/category/network-cable-x-10">
Update Category
</button>
  1. use the ref in the method to access the element
// a method in your component:
methods: {
  someMethod() {
    const button = this.$refs.theButton
   const url = button.dataset.UrlDesc
   axios.get(url).then(/* ... */)
  }
}

I removed all stuff from the button that was not important to the answer.

If you can’t set a ref due to external factors, you will have to select the button with document.querySelector('[data-id="1078747405"]') or whatever selector is suited best to your situation.

1 Like

Works perfectly!! Thank you for the fix and also the advice i will bare it in mind for the future :slight_smile: