bangthugs

Question

我有1个输入字段，1个下拉菜单和一个日期选择器字段。因此，我做了一个函数resetFields（），将值设置为空字符串“”。信息将清除，但是例如，如果我在选择菜单中选择了新日期或其他选项，则旧信息会再次显示在字段中。如何完全清除？该项目在VueJS上

FacesContext facesContext = FacesContext.getCurrentInstance();
//facesContext.getExternalContext().addResponseCookie("TEST", "TEST", properties); tried this too 
//then in properties will be the maxAge, path and domain set

Cookie cookie = (Cookie) facesContext.getExternalContext().getRequestCookieMap().get("MY_COOKIE");
if(cookie == null){
     cookie = new Cookie("MY_COOKIE", "YUMMM");
}

cookie.setMaxAge(31536000);
cookie.setPath("/coolApp/bro");
cookie.setDomain("loc3.localdomain"); // I've tried ".localdomain" too

HttpServletResponse response = (HttpServletResponse) facesContext.getExternalContext().getResponse();
response.addCookie(cookie);

已更新

<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 = ""; 
}

这是我的Vue实例

Update2：

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

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

Update3

Answer 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>

输入类型重置是表单重置的本地实现

Answer 2

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

/* .. */
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] = ''
    })
  }
}

Answer 3

更改1：在您的按钮标签中添加onclick =“ resetFields（）”而不是@ click = resetField（）

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

更改3：在与下面相同的HTML中添加脚本标签：函数resetFields（）{$（“＃number”）。val（“”）}

您也可以使用javascript。

谢谢

使用“清除”按钮重置（清除）输入字段JS / HTML

3 个答案:

bangthugs