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