本文介绍了在 vue 中提交表单.如何引用表单元素?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想从我的 Vue 页面,从一个方法中做一个经典的表单提交.我不想使用 .如何从我的方法中引用页面中的表单元素?我当然不必做 document.getElementById() 吗?

标记

 

<表格><a href="#";v-on:click="submit">SUBMIT</a></表单>

代码

 var store = {vital:''};vm = 新的 Vue({el:#vueRoot",数据:{商店:商店},方法 : {提交:函数(){//我准备好了,我该怎么做??}}});

jsfiddle

解决方案

答案是: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 ??
        }
      }
    });

jsfiddle

解决方案

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 中提交表单.如何引用表单元素?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

05-28 03:53
查看更多