在 vue-cli 表单中给 input 赋值提交后获取到的为空值的问题

input 赋值后表单提交却为空

先讲一下需求，在调用接口后将返回的值赋在表单的 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() 也可以使用在其他函数的逻辑处理完成之后实现表单提交。
最后有错误或者更改建议的朋友请留言告知一些谢谢，希望能帮到需要的朋友们。