Как динамически изменить событие клика в VueJS

Как динамически изменить событие клика в VueJS

Я думаю, вы неправильно поняли, что делает этот обработчик click :

 @click="completed ? btnFinish : 'return false;'" 

Во-первых, 'return false;' часть ничего не делает, кроме заполнения пространства после двоеточия. Вы могли бы так же легко написать null или изменить его на {amp}amp;{amp}amp; вместо ?: .

Далее, значение для @ listener может быть либо функцией, либо выражением. Так, например, что-то вроде этого будет передавать функцию:

 @click="btnFinish" 

Когда вы передаете функцию, она будет рассматриваться как обработчик события.

Однако это не то, что вы делаете. Вы передаете выражение. Когда вы передаете выражение, оно помещается в закулисную функцию Vue. Поэтому, когда вы пишете что-то вроде этого:

 @click="completed ? btnFinish : 'return false;'" 

Vue скомпилирует это до функции слушателя следующим образом:

 function ($event) { return completed ? btnFinish : 'return false;' } 

Обратите внимание, что btnFinish ссылается на метод, но не вызывает его. Итак, чтобы это работало, нам нужно заключить в скобки:

 @click="completed ? btnFinish() : 'return false;'" 

Или даже лучше:

 @click="completed {amp}amp;{amp}amp; btnFinish()" 

Или, еще лучше, перенести все это в метод:

 @click="onClick" 
 methods: { onClick () { if (this.completed) { this.btnFinish() } } } 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector