先讲一下需求，在调用接口后将返回的值赋在表单的 input 上，然后提交表单。今天在做这个的时候因为这个问题困扰了很久，明明值已经赋上去了，结果提交后显示的该值为空。具体看以下代码：
<template> <div class="hello"> <form :action="action" method="post" accept-charset="utf-8" ref="formSubmit" class="formClass"> <label> <span>ref:</span> <input type="text" name="refValue" value="" ref="inputTxt" /> </label> <label> <span>v-model:</span> <input type="text" name="modelValue" v-model="input" /> </label> </form> <button type="button" @click="submitBtn">提交</button> </div> </template> <script> export default { name: 'HelloWorld', data() { return { input: '', action: '**************' } }, methods: { submitBtn(){ this.input = 2; // 给绑定的 input 赋值 this.$refs.inputTxt.value = 4; // 给有 ref 属性的 input 赋值 this.$refs.formSubmit.submit(); // 使用 ref 操作 form 进行提交 } } } </script>在这里我用了两个 input 标签，其中一个是使用 v-model 绑定的，另一个则在上面加上了 ref 属性，在 vue 官方文档中是这样说的： 我们可以通过使用 ref 来达到操作 dom 的目的，以上代码中当我点击提交按钮时会进行两个赋值，随后提交表单，提交结果如下图所示： 在点击提交后，视图层上都显示了我们赋予的值，而在提交的表单数据中，使用 v-model 绑定的值传过去却为空，通过 ref 给 dom 元素赋值则是成功的，具体原因刚入 vue 的我还没有想到，有朋友知道的话还请告诉一下。同时，使用 this.$refs.formSubmit.submit() 也可以使用在其他函数的逻辑处理完成之后实现表单提交。 最后有错误或者更改建议的朋友请留言告知一些谢谢，希望能帮到需要的朋友们。
