<template>
<button @click="random(randomNum)">Click to plus {{count}}</button>
</template>
<script setup>
import { ref } from "vue"
const count = ref ()
const randomNum = ref (Math.floor(Math.random()*1000))
function random(randomNum) {
count.value=randomNum;
}
</script>
When I use count.value = randomNum.value
, the result is not showing. I think randomNum
is an object. If I set value to count.value
, it should use randomNum.value
, but it's not rendering.
The problem is the
randomNum
ref is only initialized to a random number once:That
randomNum
ref is passed torandom()
in theclick
-handler, but that ref's value never changes, so the clicks will appear to do nothing:Solution
Instead of passing the
randomNum
ref, generate a new random number insiderandom()
on every call:demo