Как добавить событие vue.js в существующий элемент html

Question

Есть ли способ добавить события vue.js к существующим элементам html?

HTML элементы:

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

Могу ли я каким-то образом добавить vue.js событие этой дивы?

$('.borrow-button').each(function(i, obj) { 
    //how to append for example onclick event to this divs? (onclick="borrow") 
}); 

Answer 1

VueJS не предоставляет вам эту возможность, так как цель отличается.

Вам нужно будет использовать Vanilla JS внутри Vue.

Answer 2

Если вю экземпляр называется VM вы можете использовать метод внутри него огонь событие, как этот

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

Я в настоящее время не известно ни вю способ сделать это. Но поскольку jsgrid использует jquery, вы можете использовать event handler attachment, чтобы связать методы vue.

Вот exmple:

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

Вы можете проверить этот код работает here.

Answer 4

Если вы думаете в JQuery, вы не думаете о Vue правильно. Например: https://www.youtube.com/watch?v=zMrPMNZj680