Anyone know why the variable number doesn't display the latest value when click on it? I tried using onMounted, but didn't seem to do anything. When I clicked on the paragraph it always displays 1. I expect it to display the latest number added. Any ideas?
<script setup>
import TheWelcome from '@/components/TheWelcome.vue'
import { onMounted, ref } from 'vue'
import axios from "axios"
let number = 1;
function getCurrentNumber() {
number++;
console.log(number)
}
</script>
<template>
<main>
<TheWelcome />
</main>
<p @click="getCurrentNumber">Hello, this is a test to display {{number}}</p>
</template>
This is how it should be
<script setup>
import { ref } from 'vue'
const number = ref(1);
function getCurrentNumber() {
number.value++
console.log(number.value)
}
</script>
<template>
<p @click="getCurrentNumber">Hello, this is a test to display {{ number }}</p>
</template>
Here is a working example.