title: Using Event Names stored in a variable in VueJs
body: <p>In VueJS, a child component can emit an event, for example:</p>
  
  <pre><code>this.$emit('toggle-button')
  </code></pre>
  
  <p>In the parent, we can listen to this event as follows:</p>
  
  <pre><code>&lt;my-component v-on:toggle-button="doSomething"&gt;&lt;/my-component&gt;
  </code></pre>
  
  <p>This works great. But I have a requirement where the event name (in this case, toggle-button) is stored in a variable or Vuex store. So, I don't have the exact event name but a variable or store with the name of the event.</p>
  
  <p>In such a case what would be the syntax for referring that that event name in the on-click directive?</p>
  
  <p>For example, let say we have:</p>
  
  <pre><code>let eventName = 'toggle-button'
  </code></pre>
  
  <p>How can I use this variable (eventName) instead of the exact event name (toggle-button) in the following:</p>
  
  <pre><code>&lt;my-component v-on:toggle-button="doSomething"&gt;&lt;/my-component&gt;
  </code></pre>