Vuejs - Looking to call a function with data attributes from html

Question

I am looking to call a function on click of button fetching data-attribute value , As I am versed with jquery how I am looking for this to work

<button id="openmodal" data-user="1" data-purpose="contact form" class="btn__primary" aria-label="Help"></button>
<button id="openmodal" data-user="1" data-purpose="Opt In" class="btn__primary" aria-label="Help"></button>

I will need to fetch the user id and call a function, In jquery typically, I would pass values in data-attributes and fetch them and call required function. I understand I shouldn't be using data-attributes so I am looking out for the best way of doing this , there can be multiple buttons that performs different js function with different data-purpose (attribute) So I will need to pass data-purpose and data-user to the vue component/function

Nisarg Shah · Accepted Answer · 2017-10-27 07:05:57Z

3

It is easy enough to bind the click events to buttons using the @click binding.

In order to get the data-user attribute during the click handler, you could use: event.target.attributes["data-user"].value

event.target gives you the button you clicked
.attributes["data-user"].value selects the attribute data-user and returns its value. You could similarly get the attribute data-purpose like .attributes["data-purpose"].value is you still need that.

var app = new Vue({
  el: "#app",
  methods: {
    contactForm: function(event) {
      alert("Contact form clicked. User: " + event.target.attributes["data-user"].value);
    },
    optIn: function(event) {
      alert("Opt in clicked. User: " + event.target.attributes["data-user"].value);
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>

<div id="app">
  <button id="openmodal" data-user="1" data-purpose="contact form" class="btn__primary" aria-label="Help" @click="contactForm">Contact Form</button>
  <button id="openmodal" data-user="1" data-purpose="Opt In" class="btn__primary" aria-label="Help" @click="optIn">Opt In</button>
</div>

answered Oct 27, 2017 at 7:05

Nisarg Shah

14.6k6 gold badges38 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

June Over a year ago

Thank you for your response. Can I please further ask How can I call var function contactForm in another var contactModal = new Vue({ methods: { triggerModal: function () { //need to call contactForm method here } } }

Nisarg Shah Over a year ago

You can declare the methods object inside your contactModal Vue. From there, you could use this.contactForm() to call the method.

June Over a year ago

Unfortunately I need to call this function from Modal as well as outside the modal. For eg On Click of button I am showing a modal but before that happens I need to call a function ot check whether user is allowed to be shown that modal or not. Now the same function needs to be called for button which is for opt in which can be used by any user. So I am looking to create 1 function that can handle both requirement

Nisarg Shah Over a year ago

From outside, you can call it like app.contactForm() or contactModal.contactForm() based on where the method is declared.

June Over a year ago

Posted a more detailed question stackoverflow.com/questions/46969884/… mind checking that out?

Collectives™ on Stack Overflow

Vuejs - Looking to call a function with data attributes from html

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related