javascript - How Do I Use an Import Function in a Vue 3 Template? - Stack Overflow

admin管理员组

文章数量:1278985

In a Vue 3 project, I have the following setup. There is a separate stuff.ts file with some helper functions in it and I want to use it in my template.

<script lang="ts">
  import { defineComponent, onMounted } from 'vue'
  import { doSomething } from '@/helpers/stuff.ts'
  
  export default defineComponent({
    setup(){
      onMounted(() => console.log(doSomething)) //<-- logs here okay
    }
  })
</script>

<template>
  <!-- ERROR: doSomething is not a function -->
  <a href="#do" @click="doSomething()">Do Something</a>
</template>

As far as I can tell, the function is properly imported and it's defined when I log it in onMounted().

But when I click the link and try to doSomething() from the template, it says the function isn't defined. I'm new to Vue 3, but I imagine I have to do something to prep the function and make it available.

How can I make an imported function available to my template? Do I have to call a ponent method instead and use doSomething inside that?

In a Vue 3 project, I have the following setup. There is a separate stuff.ts file with some helper functions in it and I want to use it in my template.

<script lang="ts">
  import { defineComponent, onMounted } from 'vue'
  import { doSomething } from '@/helpers/stuff.ts'
  
  export default defineComponent({
    setup(){
      onMounted(() => console.log(doSomething)) //<-- logs here okay
    }
  })
</script>

<template>
  <!-- ERROR: doSomething is not a function -->
  <a href="#do" @click="doSomething()">Do Something</a>
</template>

As far as I can tell, the function is properly imported and it's defined when I log it in onMounted().

But when I click the link and try to doSomething() from the template, it says the function isn't defined. I'm new to Vue 3, but I imagine I have to do something to prep the function and make it available.

How can I make an imported function available to my template? Do I have to call a ponent method instead and use doSomething inside that?

• javascript
• vue.js
• vuejs3
• vue-position-api

Share Improve this question Follow edited Jun 16, 2021 at 19:08 Boussadjra Brahim 1 asked Jun 16, 2021 at 18:46 Clifton LabrumClifton Labrum 14.2k1313 gold badges7777 silver badges155155 bronze badges 1

• Expose it to the tmpl via data / methods / puted. – Marc Dix Commented Jun 16, 2021 at 18:48

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

The simplest way is to just "forward" it via the return of your setup function

<script lang="ts">
  import { defineComponent, onMounted } from 'vue'
  import { doSomething } from '@/helpers/stuff.ts'
  
  export default defineComponent({
    setup(){
      onMounted(() => console.log(doSomething)) //<-- logs here okay
      return { doSomething }
    }
  })
</script>

<template>
  <!-- ERROR: doSomething is not a function -->
  <a href="#do" @click="doSomething()">Do Something</a>
</template>

Return from the setup hook :

<script lang="ts">
  import { defineComponent, onMounted } from 'vue'
  import { doSomething } from '@/helpers/stuff.ts'
  
  export default defineComponent({
    setup(){
      onMounted(() => console.log(doSomething)) 

   return {doSomething}
    }
  })
</script>

<template>
 
  <a href="#do" @click="doSomething()">Do Something</a>
</template>

For those who do not use the Composition API - Setup() hook You can do the following:

<template>
  <a href="#do" @click="doSomething()">Do Something</a>
</template>

<script>
import { doSomething } from '@/helpers/stuff.ts'
export default {

   methods: {
      doSomething,
   }
}
</script>

本文标签： javascriptHow Do I Use an Import Function in a Vue 3 TemplateStack Overflow