How to invoke function by name in vue js 3 composition api inside <script setup>?

Question

There is a function that receives a name of form submitting button (quasar framework), in vue js 2 options api i would use this keyword with [] and name of button to invoke so-called function, is there a way to do so inside script setup?

<template>    
<q-form @submit="submit">
...
<q-btn type="submit" name="save">Save</q-btn>
<q-btn type="submit" name="sendToDep1">SendToDep1</q-btn>
<q-btn type="submit" name="sendToDep2">SendToDep2</q-btn>

</q-form>
</template>

<script setup>

function submit(evt)
{
    // would like to use something like 
    // this[evt.submitter.name]()
    
   // don't want to use ifs
   if(evt.submitter.name=='save') { 
     save();
   }
   ...... 
}

function save() {
...
}

function sendToDep1() {
...
}

function sendToDep2() {
...
}
</setup>

What happens if you remove the this word from the code you've commented out ? — IVO GELOV
– IVO GELOV, Commented Jul 19, 2023 at 14:42
So how do I evaluate without object like this? evt.submitter.name() says that evt.submitter.name is not a function — Den
– Den, Commented Jul 20, 2023 at 5:19

yoduh · Accepted Answer · 2023-07-19 14:54:14Z

1

Similar to Options API, you can wrap your functions in an object and call them by referencing the object

<script setup>
const methods = {
  save: () => {
    ...
  },

  sendToDep1: () => {
    ...
  },

  sendToDep2: () => {
    ...
  }
}

function submit(evt) {
  evt.preventDefault()
  methods[evt.submitter.name]()
}
</script>

answered Jul 19, 2023 at 14:54

yoduh

15.5k2 gold badges23 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Den Over a year ago

Worked fine. But I left function declarations where they were and contracted methods object like: const submitMethods = { save, sendToDep1, sendToDep2} , and invoking works submitMethods[evt.submitter.name]

Collectives™ on Stack Overflow

How to invoke function by name in vue js 3 composition api inside <script setup>?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related