Чистить поля input после ввода?

Подскажите как правильно очищать мои посля после нажатия кнопки "Add"

new Vue({
		el: '#app',
		data() {
			return {
				topic: '',
				checked: true,
				personTask: '',
				arrs: [],
				tasks: []

			}
		},
		methods: {
			addTask() {
				this.tasks.push(this.personTask, this.checked)	 
			},
			submitHandler() {	
				this.arrs.push(this.topic, this.tasks)
			},
			// 
		}

	})
<div id="app">
	<div>	
  		<input type="text" id="checked" value="" v-model="topic">
  		<div >
  			<input type="checkbox" id="checked" value="" v-model="checked">
 			<input v-model="personTask" type="text" id="personTask" >
  		</div>
  		<button @click="addTask">have tasks</button>

		<hr>
  		<button @click="submitHandler">Add </button>
  	</div>
  	
  	<div v-for="arr of arrs" class="task">
  		{{arr}}
  	</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>


Ответы (1 шт):

Автор решения: radar4ick

Как вариант создать функцию:

setDefaultValues(){
  this.personTask = '';
  this.checked = true; // или какое тут дефолтное значение
}

И везде где надо сбрасывать значения - вызывать эту функцию. Например в addTask.

Если появляется новое значение - дописывать в одном месте в функцию setDefaultValues его "сброс"

→ Ссылка