【问题标题】：Reset(clear) input fields JS/HTML with button "clean"使用“清理”按钮重置（清除）输入字段 JS/HTML
【发布时间】：2018-11-30 16:30:04
【问题描述】：

我有 1 个输入字段、1 个下拉菜单和一个日期选择器字段。所以我做了一个函数resetFields()，它将值设置为空字符串“”。信息会清除，但例如，如果我在选择菜单中选择新日期或其他选项，旧信息会返回到字段中。我怎样才能完全清除它？该项目在 VueJS 上

<input v-model="filter.number" placeholder="Number" id="number">
<select v-model="filter.type" style="width: 209px; float: right;" id="type">
    <option value="1">A</option>
    <option value="2">B</option>
</select>

<datepicker v-model="filter.date1" placeholder="Choose date" :format="DatePickerFormat" id="date1"></datepicker>
<button style="height: 30px;" @click="resetFields()">Clean</button> 

resetFields(){ 
    var number = document.getElementById('number'); 
    var type= document.getElementById('type'); 
    var date1 = document.getElementById('date1'); 
    number.value = ""; 
    type.value = ""; 
    date1.value = ""; 
}

更新

const app = new Vue({
  el: '#app',
  render: h => h(App),
  router
})

这是我的 Vue 实例

更新 2：

Data.vue
<input v-model="filter.number" placeholder="Number">

<button @click="resetFields()">Clear</button>

main.js

const app = new Vue({
  el: '#app',
    data () {
      return {
        filter: {
          eori: null,
          docSubType: null,
          data1: null
        },
      }
    },
    methods: {
      resetFields () {
        this.eori = null
        this.docSubType = null
        this.data1 = null
      }
    },
  render: h => h(App),
  router
})

并且您的代码示例不起作用。

更新3

【问题讨论】：

我不知道你是否知道，但是......有一个 html 形式的按钮可以自动重置你的输入，check here
变量定义和赋值不匹配
这是一个错字@KrishnaPrashatt。固定
@Decrux 这是整个 Data.vue 文件吗？
不，大约有 15 个输入字段，3 个选择和以及 2-3 个日期选择器。还有一个动态渲染表。告诉我你需要我提供什么。

标签： javascript html vue.js button

【解决方案1】：

<!DOCTYPE html>
<html>
<body>

<form action="/action_page.php">
  Email: <input type="text" name="email"><br>
  Pin: <input type="text" name="pin" maxlength="4"><br>
  <input type="reset" value="Reset">
  <input type="submit" value="Submit">
</form>

<p>Click on the reset button to reset the form.</p>

</body>
</html>

输入类型重置是表单重置的原生实现

【讨论】：

刚刚试了下，效果不错，但效果不是很好。我有一些根本无法使用它（它现在没有显示？）。其他选择菜单0选项例如A，我需要完全清除它。
为此你需要使用 vue，也许你可以通过清除字段来调度和事件并对其做出反应
你能帮我做 Vue 吗？顺便说一下，这个项目在 Vue 上

【解决方案2】：

负责清除字段的代码应该在定义字段的组件中。在 Data.vue 组件的 methods 对象下添加 resetFields 函数。

/* .. */
methods: {
  /* ... */
  resetFields() {
    this.filter.eori = ''
    this.filter.docSubType = ''
    this.filter.data1 = ''

    // Or just clear all object's properties
    Object.keys(this.filter).forEach(key => { 
      this.filter[key] = ''
    })
  }
}

【讨论】：

不，它不适合我...我会更新我的第一篇文章
更新了@Konrad Kalemba

【解决方案3】：

更改 1：在你的按钮标签中添加 onclick="resetFields()" 而不是 @click=resetField()

更改 2：将 jquery CDN 添加到 HTML 代码的标签上方 https://code.jquery.com/

更改 3：在相同的 HTML 中添加一个脚本标记，如下所示：函数resetFields(){$("#number").val("")}

您也可以使用 javascript。

谢谢

帮派

【讨论】：

对于如此简单的任务，绝对不需要像 jQuery 这样的大库。尤其是在使用 Vue 的时候。
感谢您的建议。 :)