Vue在表单提交后，如何不清空表单？

Question

1. 表单提交通过vue-resource的get方法进行提交，后台返回status=500时，表示有误，需要重新提交，此时要弹窗提示错误信息，此时将错误信息绑定给data的errorMsg;绑定后，页面会进行重新渲染，表单会被清空。

2. 如何才能让表单不清空呢？ 有试过用原生js，document.getElementById("error").style.display = "block/none"，控制显示隐藏；通过document.getElementById("error").innerText = errorMsg，来绑定数据；此时表单不会被清空，但是写法并不完美，而且这样的解决方式只能是暂时的解决，不是最优的解决方式，有遇到过此类问题的吗？求大神指导~~~

Answer 1

示例如下：

<div id="app">
    <form @submit.prevent>
        <div>
            <div>
                <input type="text" v-model="model.name">
            </div>
            <div class="error" v-if="model.name.length <= 0 || model.name.length > 9" style="color: red;">
                名称长度必须大于0小9
            </div>
        </div>
        <button type="submit" @click="checkValue()">提交</button>
    </form>
</div>

题主你要的应该是这个@submit.prevent

js代码如下，你可以参考一下

new Vue({
        el: '#app',
        data: {
            model: {
                name: ''
            }
        },
        methods: {
            checkValue: function(){
                if(this.model.name.length <= 0 || this.model.name.length > 9){
                    alert("请输入合法的名称");
                }else{
                    alert("提交表单");
                }
            }
        }
    });

阻止表单的默认提交之后，表单校验的过程可以随意编写。

Answer 2

为何不试试缓存localstorage中呢。

Answer 3

表单不是 ajax 提交吗？ajax 提交表单时，完全可以不需要 form 元素，也不必然清空表单并跳转

表单对应的 Vue 实例数据除了表单初始化之外，任何时候都不应该再赋值或清空，即使后端返回了 500，这时候对是否显示错误提示的数据的赋值不应该影响到表单对应的 Vue 实例数据

建议检查一下你的 Vue 实例数据结构是否合理

Answer 4

@金鱼公主 你好，你的问题解决了么？我也遇到这个问题，想提交失败直接提示信息不想清空input框的值，也不想用document.getElementById("error").innerText=errorMsg，想直接设置this.errorMsg..你怎么解决的？非常感谢?