How to make event handler only on condition?

Question

Vue.js

How to make the v-on:click handler only on some condition?
I render blocks with buttons in the v-for="block in blocks" cycle, inside which the v-on:cilick handler is hung.
How can I make it hung only when the block.data == true condition is satisfied?
I think it’s stupid to check in the method itself when clicking, because handlers will just hang on the page.

Answer 1

Several solutions are possible.
For example, what prevents you from looking already in the handler whether there is block.data == true. Pass block.data directly to the handler? And already in the handler to watch block.data == true? If not, the handler does not work further, if yes, then it does its job.
It is also possible to assign a handler depending on some condition, i.e.

<div id="app">
  <button @click="bool ? one() : two()">Click</button>
</div>

Here is an example where the handler is not hung up on all elements, but only on those that satisfy the condition: