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

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_39224266/article/details/82057089

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

展开阅读全文

没有更多推荐了,返回首页