Retrieving the value from a vuetify v-text-field to use in another text field

Question

Retrieving the value from a vuetify v-text-field to use in another text field

Looking to suggest a username based on the user's first and last name. The concept is that after the user fills out the first name and last name fields, the value in the username field will be a combination of their first and last names.

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>

javascript vue.js vuetify.js

Answer 1

Answer №1

username should be defined as a computed property with get/set functions:

<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>

Answer 2

username should be defined as a computed property with get/set functions:

<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>

Retrieving the value from a vuetify v-text-field to use in another text field

Answer №1

Similar questions

What occurs when an npm module is removed from the repository?

How can I pass an array from HTML to Node.js and subsequently store it in MongoDB?

In JavaScript with Node.js, how can one verify a file's size and only download the initial kilobyte of the file?

Modify the layout of the date selector to display weekdays instead - material ui

Switch to using addresses instead of latitude and longitude coordinates when utilizing the Google Maps API

Transferring data only once specific agreements have been fulfilled

Is Proxy.apply() not functioning correctly on Node.js? I'm unsure if this is a bug or if I am implementing it incorrectly

Exploring the power of Vue.js: implementing radio buttons within a v-for iteration

Is there a way to substitute the HOC with a single call and solely modify the prop?

Creating nested namespaces with interfaces in Typescript type definitions

Execute React program within VM Azure

Confirm that the form is valid prior to displaying the Bootstrap modal popup

I can't figure out why my code isn't functioning properly. My goal is to have a PDF file generated when the submit button is clicked on a form, and for a

Is there a more efficient method to gather properties from an object into separate arrays without the need for using `map` twice?

What is the best method for selecting or isolating the code for a single animation created using JavaScript?

Error: cannot use .json data with `filter` method from WEBPACK_IMPORTED_MODULE_2__["filter"]

Include the distribution file from the npm package in the final build

Is there a way to efficiently process multipart/formdata, application/json, and text/plain within a single Express handler?

utilize images stored locally instead of fetching them from a URL path in a Vue.js project

Trouble with Bootstrap modal implementation when using ajax and looping through data