I want to make a username suggestion based on users first and last name. The idea is after user finished first name and last name field, the username field value will be first + last name.
firstName = Bobby
lastName = Brown
username = BobbyBrown
<v-text-field
v-model="firstName"
label="First Name"
></v-text-field>
<v-text-field
v-model="lastName"
label="Last Name"
></v-text-field>
<v-text-field
v-model="username"
label="Username"
></v-text-field>
<script>
export default ({
data() {
return {
firstName: '',
lastName: '',
username: '',
}
},
})
</script>
username should be declared as computed property with set/get methods:
<script>
export default ({
data() {
return {
firstName: '',
lastName: '',
}
},
computed:{
username:{
get(){
return this.firstName+' '+this.lastName;
},
set(val){
const [first,last]=val.split(' ');
this.firstName=first;
this.lastName=last;
}
}
})
</script>