Calling service method in a Vue template

user_1738094 0
Viewed 1157

I have

<template>
  <button @click="doSomething">...</button>
</template>

<script>
import ApiService from '../service/api.service';
export default {
  setup() {
      function doSomething() {
        ApiService.doSomething();
      }
      return {
        doSomething
      }
  }
}
</script>

If I make it shorter (like I'm used in Angular):

<template>
  <button @click="ApiService.doSomething">...</button>
</template>

<script>
import ApiService from '../service/api.service';
</script>

It doesn't work, throws a runtime error. (It doesn't work even if I try as function call: @click="ApiService.doSomething()"

Can you help, how to save time/code and directly call ApiService.doSomething just in a template?

P.S. they asked me to post ApiService also so here it is: api.service.js:

import axios from 'axios';
import router from '@/router';

const ApiService = {

    init(baseURL) {
        axios.defaults.baseURL = baseURL;
    },

    //...

    doSomething() {
        router.push({ path: '/goSomewhere' });
    },

}

export default ApiService
vuejs3 vue.js javascript
3 Answers

It doesn't work because you need to pass it through the setup function to be available in the template.

you can do this though:

<template>
  <button @click="ApiService.doSomething">...</button>
</template>

<script>
import ApiService from '../service/api.service';
export default {
  setup() {
      return { ApiService }
  }
}
</script>

Alternatively, you may also use the setup attribute for script, which does some hoisting magic for you. (rfc link)

<template>
  <button @click="ApiService.doSomething">...</button>
</template>

<script setup>
import ApiService from '../service/api.service';
export ApiService;
</script>
user_1975460

You could spread that service functions in the methods option methods:{...ApiService } :

<template>
  <button @click="doSomething">...</button>
</template>

<script>
import  ApiService from '../service/api.service';
export default {
methods:{
  ...ApiService
}
}
</script>

api.service.js

const ApiService = {
  doSomething() {
    console.log("doing something");
  },

  doSomething2() {
    console.log("doing something 2");
  },

  doSomething3() {
    console.log("doing something 3");
  }
};

export default ApiService;

LIVE DEMO

user_81728570

Could you try adding parentheses to the function call?

<template>
  <button @click="ApiService.doSomething()">...</button>
</template>

<script>
import ApiService from '../service/api.service';
</script>
user_78532790
Related