Resetting form and input fields

Asked Feb 25 '19 at 02:10

Active Feb 25 '19 at 02:10

Viewed 605 times

So I am making a simple todo list app with Framework7 and VueJS, but I'm struggling to understand how to reset the input fields.

<f7-list id="todo-form"> 
 <f7-list-input id="item-input" type="text" name="listitem">
 </f7-list-input>
</f7-list>
<f7-button @click="newItem">Add task</f7-button>

newItem() {
 let formData = this.$f7.form.convertToData('#todo-form');
 this.listItemName = formData.listitem;

 if (this.listItemName == '' || this.listItemName === undefined) {
  return false;
 } else {
  this.listItems.push(this.listItemName);
  console.log(this.$$('#item-input')); // What to do here?
 }
}

I would like to reset the item-input field as I click the button. I tried using Dom7 (not jQuery!) for this but there seems to be nothing storing the form input value.. After googling all I could find is suggestions to do $$('#item-input').val('') but there is no .val when I look through the element in the console.

Help is, as always, much appreciated!

asked Feb 25 '19 at 02:10

ariaofsorrow

1

I suggest you add a **form** property to the **f7-list** https://framework7.io/vue/list-view.html – muka.gergely Feb 25 '19 at 06:45
Wow, somehow I assumed form to be true by default and didn't realise I had to add it separately. That was so easy. Thank you so much!! – ariaofsorrow Feb 25 '19 at 07:10
Happy to help! :) – muka.gergely Feb 25 '19 at 07:27

Resetting form and input fields

0 Answers0