vue2获取表单元素时表单项内容丢失问题【无原因】

问题描述

一次简单实例中,在a标签绑定的单击事件中获取页面一个表单元素,将a标签的href属性作为表单提交地址进行submit手动提交.此时form表单的声明位置会引出表单元素子元素内容获取不到的问题.

• 情况一: form声明在 vue对象挂载的元素内

<table id="main_tb">
        ...
        <form id="send_delete_frm" method="post">
            <input type="hidden" name="_method" value="DELETE"/>
        </form>
    </table>

      var vue = new Vue({
          "el": "#main_tb",
          methods: {
              delEmp: function(event){

                  ...
                      <!--获取a标签元素-->
                      let del_ele = event.target;
                      <!--获取表单元素-->
                      let send_delete_frm = document.getElementById("send_delete_frm");
                      <!--修改表单提交地址-->
                      send_delete_frm.action = del_ele.href;
                      <!--提交表单-->
                      send_delete_frm.submit();
                  ...
          },
      })

在浏览器调试中查看表单对象的获取结果:

可以看到,该表单元素不含任何的子元素(即我的表单项消失).

• 情况二: 表单声明在vue对象挂载的元素外

<table id="main_tb">
        ...
</table>
<form id="send_delete_frm" method="post">
    <input type="hidden" name="_method" value="DELETE"/>
</form>

在浏览器调试中查看表单对象的获取结果:

正常获取到表单元素子元素（即表单项内容）。