Vue3 使用 reactive/ref v-model el-form 无法双向绑定的问题

原文地址：https://blog.csdn.net/weixin_52937671/article/details/125206278

 

原因是：ref 挂载的变量名 和 v-model 同名了。

 

错误示范：

<!-- error -->
<van-form ref="form">
    <van-field v-model="form.name" name="name" label="姓名" placeholder="请输入您的姓名" />
</van-form>

<script setup lang="ts">
const form = reactive({
    name: '',
})
</script>

 

正确示范：只要不重名即可，但为了规范，最好还是让 ref 绑定的值采用 $form 这种格式。

<!-- ok -->
<van-form ref="$form">
    <van-field v-model="formData.name" name="name" label="姓名" placeholder="请输入您的姓名" />
</van-form>

<script setup lang="ts">

const $form = ref(null)

const formData = reactive({
    name: '',
})
</script>