我有 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
最佳答案
<!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>
输入类型重置是表单重置的 native 实现
关于javascript - 重置(清除)输入字段 JS/HTML 按钮 "clean"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50966862/