2

Is there any way to append vue.js events to existing html elements?

HTML elements:

<div class="borrow-button">Borrow</div>
<div class="borrow-button">Borrow</div>
<div class="borrow-button">Borrow</div>

Can I somehow add vue.js event to this divs?

$('.borrow-button').each(function(i, obj) {
    //how to append for example onclick event to this divs? (onclick="borrow")
});
3
  • Can you elaborate what are you trying to achieve? Commented Dec 16, 2016 at 11:29
  • @saurabh Im using jsgrid to generate table with data, so html elements are already created. When I create in jsgrid div with vue.js event, it doesn't work, so my idea was to append event to this created divs. Commented Dec 16, 2016 at 11:49
  • You can't add vue events to HTML vue does not compile. You can add regular js events with jquery or plain js Commented Dec 17, 2016 at 17:41

3 Answers 3

3

I am currently not aware of any vue way of doing this. But as jsgrid uses jquery, you can use event handler attachment of it to bind vue methods.

Here is an exmple:

var demo = new Vue({
    el: '#demo',
    data: function(){
        return {
      };
    },
    methods:{
      myMethod () {
        alert('Do whatever you wanns do')
      }
    },
    mounted () {
        $("#myBtn").on('click', this.myMethod);
    }
})

You can check this code working here.

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

Comments

2

If vue instance is called vm you can use a method inside it to fire the event like this

// Vue Instance
var vm = new Vue({
  methods: {
      handleButton: function(i, obj) {
        //Do whatever you want
      }
  }
})

$('.borrow-button').each(function(i, obj) {
    vm.handleButton(i, obj)
});

Comments

0

VueJS does not provide you this possibility as the purpose is different.

You would need to use Vanilla JS inside the Vue.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.