<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.
CodePudding user response:
try this..
<template>
<button @click="random()">Click to plus {{count}}</button>
</template>
<script>
import { defineComponent, ref } from "vue";
export default defineComponent({
setup() {
const count = ref(0)
const randomNum = ref(Math.floor(Math.random()*1000))
const random = () => {
count.value = randomNum.value;
}
return {
count,
random,
};
},
});
</script>
CodePudding user response:
The problem is the randomNum
ref is only initialized to a random number once:
<script setup>