Можно ли добавить событие v-on:click с помощью jQuery и обработать его во vue?

343

17 февраля 2017, 03:59

Есть код html

<button id='qwerty'>qwerty</button>

Далее в javascript

$('#qwerty').attr('v-on:click', 'testMethod');

Как (и можно ли вообще) обработать событие testMethod во VueJS?

Это нужно для этого: Для построения дерева категорий использую эту библиотеку mbraak.github.io/jqTree и хочу при клике на категорию с помощью VueJS и VueResourse получать товары из выбранной категории. Но для этого нужна директива v-on:click

Answer 1

С такой задачей vue прекрасно справится и без jquery. Например, вот реализация древовидного меню из оф. документации. (Даже объекты с данными вроде как идентичны.)

По вашему вопросу, можно например воспользоваться trigger(), при клике на элемент, у которого нет v-on:click

$('#qwerty').on('click', function(evt) { 
  $('#new').trigger('click'); 
}); 
 
 
var app = new Vue({ 
  el: '#new', 
  methods: { 
    testMethod: function(e) { 
      console.log('Вызвали testMethod!'); 
    } 
  } 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script> 
 
<button id="qwerty">Нет v-on:click</button> 
<button id="new" v-on:click="testMethod">Есть v-on:click</button>