How to clean input value after submitting it in Vuejs?

Question

I am doing a to-do list in Vuejs. When I enter a new value in the input field, it seems that I can't make the input value to reset. How can I accomplish this?

I have tried to grab the input value & reset it to an empty string, but I haven't had any luck.

HTML Code:

<div id="app">
  <h1>{{ message }}</h1>
  <form v-on:submit="addNewTodo">
    <input class="input-value" v-model="todo.task" type="text">
    <button type="submit">Add todo</button>
  </form>
  <ul>
   <li  v-for="todo in todos" :class="{ completed: todo.isActive }" @click="$set(todo, 'isActive', !todo.isActive)">
    {{ todo.task }} <span v-on:click="deleteTodo">{{ todo.delete }}</span>
   </li>
  </ul>
</div>

JS Code:

var app = new Vue({
  el: '#app',
  data: {
    message: 'List of things to do today',
    todos: [
      { task: 'Have breakfast', delete:'(x)'},
      { task: 'Go to the gym', delete:'(x)'},
      { task: 'Study Vuejs', delete:'(x)'}
    ],
    todo: {task: '', delete: '(x)'}
  },
  methods: {
    addNewTodo: function(e){

      e.preventDefault();
      this.todos.push( this.todo );

      var inputValue = document.querySelectorAll('.input-value').value;

      inputValue = ''
    },
    deleteTodo: function(){
      this.todos.shift( this.todo )
    }
  }
});

Pinkie A · Accepted Answer · 2019-02-17 17:52:32Z

2

Your input value is two-way binded with todo.task so you could do the following after adding a new todo task.

this.todo.task = ''

edited Feb 17, 2019 at 17:52

answered Feb 17, 2019 at 17:47

Pinkie A

338 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Manuel Abascal Over a year ago

Do you mind doing a JSfiddle sample? I tried it doesn't seem to work.

Pinkie A Over a year ago

I updated my comment, you need to call todo.task with this

Boussadjra Brahim · Accepted Answer · 2019-02-17 17:50:30Z

1

Try to flush it like :

  addNewTodo: function(e){

      e.preventDefault();
      this.todos.push( this.todo );
      this.todo.task=""
    }

answered Feb 17, 2019 at 17:50

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

1 Comment

Manuel Abascal Over a year ago

Yup that worked good sir! However, it also deletes the added to-do from the list of to-dos. :(

Collectives™ on Stack Overflow

How to clean input value after submitting it in Vuejs?

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related