How to append vue.js event to existing html element

Question

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")
});

Answer 1

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.

Answer 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)
});

Answer 3

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

You would need to use Vanilla JS inside the Vue.