我有 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>
输入类型重置是表单重置的本机实现
负责清除字段的代码应位于定义字段的组件中。在 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] = ''
})
}
}
更改 1： 在按钮标签中添加 onclick="resetFields((" 而不是 @click=resetField((
更改 2：将 jquery CDN 添加到标记上方的 HTML 代码中 https://code.jquery.com/
更改 3：在同一 HTML 中添加脚本标记，如下所示： function resetFields(({$("#number"(.val("(}
你也可以使用javascript。
谢谢