求助：在Nuxt 3中使用Vue.js实现点击修改变量值

你当前代码里用普通let声明的value不具备响应式特性，所以修改后页面不会同步更新显示。要实现点击后变量值同步更新到视图，需要使用Vue3的响应式API ref：

正确代码示例 #

模板部分：

<a id="change" @click="changeValue()">{{ value }}</a>

脚本部分：

<script lang="ts" setup>
import { ref } from 'vue'

let value = ref("Old");
function changeValue(){
  value.value = "New"
}
</script>

关键说明 #

• 用ref()包裹初始值创建响应式变量，变量值变化时视图会自动更新
• 在<script setup>中修改ref变量需要通过.value属性；模板中使用时无需加.value，Vue会自动解包

内容的提问来源于stack exchange，提问作者Mathias Van Langendonck