本文介绍了在 vue 中提交表单.如何引用表单元素?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想从我的 Vue 页面,从一个方法中做一个经典的表单提交.我不想使用 .如何从我的方法中引用页面中的表单元素?我当然不必做
document.getElementById()
吗?
标记
<表格><a href="#";v-on:click="submit">SUBMIT</a></表单>
代码
var store = {vital:''};vm = 新的 Vue({el:#vueRoot",数据:{商店:商店},方法 : {提交:函数(){//我准备好了,我该怎么做??}}});
解决方案
答案是:ref
:https://vuejs.org/v2/api/#ref
标记
<表单引用=表单"><input name="vitalInformation" v-model="store.vital"><a href="#" v-on:click="submit">SUBMIT</a></表单>
代码
var store = {vital:''};vm = 新的 Vue({el : "#vueRoot",数据:{商店:商店},方法 : {提交:函数(){this.$refs.form.submit()}}});
I want to do a classic form submission from my Vue page, from a method. I don't want to use an <input type="submit">
. How do I reference the form element in the page from my method? Surely I don't have to do document.getElementById()
?
markup
<div id="vueRoot">
<form>
<input name="vitalInformation" v-model="store.vital">
<a href="#" v-on:click="submit">SUBMIT</a>
</form>
</div>
code
var store = {vital:''};
vm = new Vue({
el : "#vueRoot",
data : {store : store},
methods : {
submit : function(){
//I'm ready, how do I do it ??
}
}
});
解决方案
The answer would be: ref
: https://vuejs.org/v2/api/#ref
Markup
<div id="vueRoot">
<form ref="form">
<input name="vitalInformation" v-model="store.vital">
<a href="#" v-on:click="submit">SUBMIT</a>
</form>
</div>
code
var store = {vital:''};
vm = new Vue({
el : "#vueRoot",
data : {store : store},
methods : {
submit : function(){
this.$refs.form.submit()
}
}
});
这篇关于在 vue 中提交表单.如何引用表单元素?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!