Loop Vue2 tag with keyup + modifier and click I have following code but wonder if I can loop it instead of copy-pasting.

calculator.ts

data: function() {
  return {
    calcInput: 'user types some value in input with v-model'
  }
},
template: `
  &lt;span
    class="calc-button-control"
    @click="evaluate()"
    @keyup.enter="evaluate()"
  &gt;calc&lt;/span&gt;

  &lt;span
    class="calc-button-control"
    @click="calcInput = calcInput.substring(0, calcInput.length - 1) "
    @keyup.del="calcInput = calcInput.substring(0, calcInput.length - 1) "
  &gt;del&lt;/span&gt;

  &lt;span
    class="calc-button-control"
    @click="calcInput = ''"
    @keyup.esc="calcInput = ''"
  &gt;clr&lt;/span&gt;
`


Pass modifier to v-on:keyup is the hardest part here.
@[loopedItem.key]={loopedItem.method} - doesn't work.
In this case I can see in event listeners for example keyup.enter but it doesn't work.
No.

Or well, maybe you could but I absolutely do not see any reason to do so.

What each &lt;span&gt; has in common:


The same class
They all have a click event and a keyup event


What each &lt;span&gt; has different:


They all have different handlers for what to do on the click/keyup event
They all have listen for different keyup events.


I don't see any benefit in creating a loop from this.

Some things you might want to consider though is:


Have a method that is performed for both click and the keyup event, to not copy-paste code between the different handlers.
Create a component for &lt;span class="calc-button-control"&gt;


If you have plenty of more of these &lt;span&gt; elements, creating a component would be the way to go. Then you could have a component to handle the following:


It is a &lt;span&gt; element and applies the calc-button-control class.
It has a method for what to do when clicked or keyup event triggers.


I am not sure how flexible you can make the keyup listener, I don't think you can for example pass :keypress="enter" or similar to have it listen to @keyup.enter so I am not sure if creating a component for all of this does more harm than good.