关于将值设置为 object.value 的一个小 vue 问题

Question

<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>

当我使用count.value = randomNum.value时，结果没有显示。我认为 randomNum 是一个对象。如果我将值设置为 count.value，它应该使用 randomNum.value，但它不会渲染。

Answer 1

试试这个..

<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>

Answer 2

问题是 randomNum ref 仅初始化为随机数一次:

<script setup>
                    /* set only once */
const randomNum = ref(Math.floor(Math.random()*1000))
⋮
</script>

randomNum ref 被传递给 click-handler 中的 random()，但 ref 的值永远不会改变，因此点击似乎什么都不做：

<template>                  
  <button @click="random(randomNum)">Click</button>
</template>

解决方案

不是传递 randomNum ref，而是在每次调用时在 random() 内生成一个新的随机数：

<script setup>
function random() {
                       /* new random number */
  count.value = Math.floor(Math.random() * 1000)
}
⋮
</script>

<template>
  <button @click="random()">Click</button>
</template>

demo

关于将值设置为 object.value 的一个小 vue 问题

a small vue issue about set value to object.value

vue.js

vue-component

vuejs3

vue-composition-api

vue-script-setup

解决方案