How to call a function defined in "onMounted" lifecycle hook in Vuejs?

Question

<script setup lang="ts">

function callSomething() {
   something(); //not working
}

onMounted(() => {
function something() {
    console.log("Hello, World");
 }
});
</script>

<template>
    <div>
        <button @click="callSomething">Click</button>
    </div>
</template>

In Vuejs I want to call a function from <script setup lang="ts"> which is defined in onMounted lifecycle hook. Though, I can call function/method from onMounted that defined in <script setup lang="ts">

Error in console:

Uncaught TypeError: something is not a function

May I know the use case of calling a method inside onMounted() ? As per it's name it called when component mounted. For a button click, you can call a method directly. — Rohìt Jíndal
– Rohìt Jíndal, Commented Mar 12, 2022 at 16:41
@CreativeLearner In Vue as far as I observed, Vanillajs code is accessible only within onMounted lifecycle hook and I had some vanilajs code and events with some logic. I needed to call a function, and inside that function I had some events references. Thats why actually I needed to call method defined in onMounted. — Sabbir Sobhani
– Sabbir Sobhani, Commented Mar 12, 2022 at 16:47
But as per the digest cycle this hook will work on component mount and after that if you want to execute any code based on any event that you have to call directly a method. You can access vanilajs code outside of onMounted() method as well. — Rohìt Jíndal
– Rohìt Jíndal, Commented Mar 12, 2022 at 16:49
@CreativeLearner for example let sliders = document.querySelector(".carouselbox"); without put this statement inside onMounted, sliders is not executing when it is inside <script setup lang="ts"> only — Sabbir Sobhani
– Sabbir Sobhani, Commented Mar 12, 2022 at 16:57
It should work, What issue you are facing ? It's just a normal querySelector method. — Rohìt Jíndal
– Rohìt Jíndal, Commented Mar 12, 2022 at 17:02

Boussadjra Brahim · Accepted Answer · 2022-03-12 16:38:59Z

3

The something function is defined only in the scope of the onMounted callback, try to define it outside it to be available for the hook and the other function :


<script setup lang="ts">

function callSomething() {
   something(); //not working
}

function something() {
    console.log("Hello, World");
 }
onMounted(() => {

});
</script>

answered Mar 12, 2022 at 16:38

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

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

Comments

Rohìt Jíndal · Accepted Answer · 2022-03-12 16:45:19Z

3

As per it's name onMounted(), This life cycle hook always execute when component mounted for the first time. For a button click, you can call a method directly outside of this onMounted().

<button @click="callSomething">Click</button>

function callSomething() {
   // Logic can come directly here.
}

answered Mar 12, 2022 at 16:45

Rohìt Jíndal

27.3k16 gold badges80 silver badges133 bronze badges

Collectives™ on Stack Overflow

How to call a function defined in "onMounted" lifecycle hook in Vuejs?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related