[Vuejs]-Change input field data in vue js

by

0👍

I’m thinking you want to do something like…
User types in a username, somewhere in the UI you show a list of available usernames, user clicks preferred username, input box is updated with selected username.

Without seeing any of your code it’s difficult to give you an specific answer, however, what I would do is:

  1. Create the input box. Bind this to an object in your script:
    HTML:

    <input v-model="username"/>
    Script: username: string = ""; availableUsernames: [""];

  2. Create a button next to the input box, when it’s pressed it calls your API and returns the available usernames and applies to to availableUsernames.

  3. The available usernames are returned as an array and the array is displayed on your UI as a list.

  4. When you click on an object in the list on your UI, this calls a function which updates the username property. e.g.:

    <li v-for="u in usernames"><a @click="applyUsername(u.description)">
    applyUsername(description: String){ this.username = description }

Leave a comment