How to use a function defined in composition api in options api?

768 Views Asked by At

I have a component and I'm using both composition api and options api. I want to use a function in options api which defined in composition api. How can i handle it?

For example;

<template>
<button @click="cloneData">Click Me</button>
</template>
<script>
import { ref } from '@vue/composition-api'

export default {
methods: {
cloneData()
{
compositionApiFunct()
}
},
setup(){
const compositionApiFunct = function() {
      console.log("testFunc")
    }
return {
compositionApiFunct
}
}
}
</script> 

When I do this, I get the following error:

Error in v-on handler: "ReferenceError: compositionApiFunct is not defined"

1

There are 1 best solutions below

0
Uğur Can On

I was getting this error because I didn't use this.

<template>
<button @click="cloneData">Click Me</button>
</template>
<script>
import { ref } from '@vue/composition-api'

export default {
methods: {
cloneData()
{
this.compositionApiFunct()
}
},
setup(){
const compositionApiFunct = function() {
      console.log("testFunc")
    }
return {
compositionApiFunct
}
}
}
</script