Search code examples
javascriptvuejs3vite

Vue3 compiling removes function's parameters


I need to send the index and the $event but Vite or Vuejs keep removes the parameters for a button when compiling.

Here all the tests

<script setup>
function imageAdd (index, ev) {
    console.log(index, ev);
}
</script>

<template>
<button class="button" type="button" @click="imageAdd('test1', 'test2')">b1</button>
<button class="button" type="button" @click="imageAdd(index, $event)">b2</button> // index is declared in a v-for loop
<button class="button" type="button" @click="imageAdd($event)">b3</button>
<button class="button" type="button" @click="imageAdd()">b4</button>
<button class="button" type="button" @click="imageAdd">b5</button> // the only test which send $event
</template>

and a part of the compiled js code, all buttons are the same without parameters

createBaseVNode("button", {
  class: "button",
  type: "button",
  onClick: ($event) => imageAdd()

Solution

  • It is removed probably as part of optimization process. In production version, console.log is removed and in next optimization pass arguments are removed because they are unused.

    Also this could be useful https://github.com/vitejs/vite/discussions/7920