Vue.js: How to fill a form prepopulated with data from a get request?

Question

I want to load data with a GET request and fill the data to the input data attributes at vue.js 3 like

<input id="name" type="text" v-bind:placeholder="$t('message.NamePlaceholder')" value="{{ name }}" required>

and this is my script part

<script>
export default {
  data () {
    return {
      userInformation: {},
      name: "",
   }
},
mounted () {
  this.getUserInformation();
},
methods () {
  getUserInformation() {
    this.$axios({
      method: 'get',
      url: 'http://127.0.0.1:8000/api/get_user_information',
    }).then(response => {this.userInformation = response.data});
    this.name = this.userInformation.Name;
   }
 },
}

But the input field contains only {{ name }}. I tried also v-bind:value, but this didn't solve the problem.

Answer 1

The mistake was that I have to set the variable this.name at the axios command:

this.$axios({
  method: 'get',
  url: 'http://127.0.0.1:8000/api/get_user_information',
}).then(response => {
  this.userInformation = response.data;
  this.name = this.userInformation.Name;
});

Answer 2

Whenever you need to bind values to attributes {{}} are unnecessary. You can just write v-bind:value="name" or :value="name"

E.g.:

<input id="name" type="text" :placeholder="message.NamePlaceholder" :value="name" required></input>