[Vuejs]-Input individually clears the value of v-model

by

2👍

You can use a common method name that accepts an argument. For example:

// JS

clearField(fieldName) {
  this[fieldName] = '';
}

// HTML

<input v-model="name" type="text" placeholder="name"> 
<span @click="clearField('name')" v-if="this.name.length > 0">x</span>
<input v-model="email" type="text" placeholder="email"> 
<span @click="clearField('email')" v-if="this.email.length > 0">x</span>
<input v-model="address" type="text" placeholder="address"> 
<span @click="clearField('address')" v-if="this.address.length > 0">x</span>
👤Atif

2👍

Make one function and pass the property name as parameter then access it using [] :

 clear(property){
    this[property]=''
  }

or just do an inline instruction :

 <input v-model="name" type="text" placeholder="name"> 
 <span @click="name=''" v-if="this.name.length > 0">x</span>
👤Boussadjra Brahim

Leave a comment