Vue中函数内更新v-model绑定变量无效，用ref仍未解决

首先，你用var定义的code是普通变量，不具备Vue的响应式能力，所以修改它的值后，Vue无法感知到变化，自然不会更新输入框的视图。

你说用ref没解决，大概率是用错了方式，正确的用法如下：

正确代码示例 #

<script setup>
// 先导入ref
import { ref } from 'vue'

// 创建响应式变量，初始值123
const code = ref(123)

function run() {
    // 在script里修改ref变量，必须通过.value访问
    code.value = 5456
}
</script>

<template>
    <!-- 模板里直接用变量名，不用加.value，Vue会自动解包 -->
    <input v-model="code" /> <button @click="run">Run</button>
</template>

关键注意点 #

• 必须从vue中导入ref，才能创建响应式变量
• 在<script setup>中修改ref变量时，必须使用.value来访问内部值；但在模板里直接写变量名即可，Vue会自动处理解包
• 别用var/let定义普通变量来做响应式数据，Vue3中响应式数据必须通过ref（基本类型）或reactive（引用类型）创建

内容的提问来源于stack exchange，提问作者kilasuelika