小记：vue的表单清除

最近做了一个表单查询的页面，需要实现查询功能的清空功能，将查询的所有信息置空。

<div id="show-list">
  <div id="query-condition">
    <div style="margin: 10px 0 10px 84px">
      <b>事件行为：</b>
      <select style="width: 200px;height: 30px; margin:0 150px 0 5px;">
        <option v-for="type in event_type">{{type.name}}</option>
      </select>
      <b>用户ID：</b>
      <input v-model="text" type="text" placeholder="用户ID" style="width: 200px;height: 30px; margin:0 149px 0 5px;padding-left: 3px">
      <b>UUID：</b>
      <input type="text" placeholder="UUID" style="width: 200px;height: 30px; margin-left: 5px;padding-left: 3px">
    </div>
<div class="btn1" style="margin-bottom: 20px">
  <button  class="btn btn-primary" type="button" style="margin-right: 50px;outline: none">查询</button>
  <button class="btn btn-default" type="button" style="outline: none" @click="resetAll">清空</button>
</div>

JS代码：

methods: {

    //清空input和select中的内容
    resetAll(){
  $('#show-list').find('input,select').each(function () {
        $(this).val('');
  });
    },

优点：代码量少，很容易理解，兼容性好

缺点：所有内容都置空了，包括之前默认显示的内容。

-------------------------------------------------------------------------------------------

上边的方法除了之前说的缺点，还有一个更大的缺点，就是该操作只是表面清除了，但在此编辑input输入框时，内容还会出现。

主要的原因还有就是我今天操作的时候，压根没有反应了，所以打算换一种方法。很稳，但是有点麻烦。那就是遍历一遍表单。

上代码：

//清空
f_reset_all() {
 let inputs = document.getElementsByTagName("input");
 for (let i = 0;i < inputs.length;i++){
  inputs.item(i).value = "";
     }
     let selecors = document.getElementsByTagName("select");
 for (let j = 0;j < selecors.length;j++) {
  selecors.item(j).value = selecors.checked;
     }
     window.location.reload();
},

很明显，我的表单里面只有input和select，所以只需要遍历这两个就好了，要是表单里边有很多种类，还是不建议用这种

方法的，有点小麻烦，但是之前试了集中其他的方法，效果不好，额，，就是没有效果，完全不起作用。

我最后边的window.location.reload()意思就是在清空表单的同时，刷新一下页面，使得数据和查询条件保持一致。