Adding data to v-text-field from axios response

Question

How can I assign the value retrieved from axios to v-text-field

I have this in my template:

<v-text-field
   v-model="name"
   label="Name"></v-text-field>

    <script>
    import axios from 'axios';

    export default {
      data() {
        return {
          name: '' // <= how will I assign the value here from axios response?
        }
      },
      asyncData ({ params }) {
        return axios.get(`my-url`)
        .then((response) => {
          return { user: response.data.data.results[0] };
        });
      }
    }
</script>

@ittus It's automatically called when the vue page loaded. I can also get the results from response. What I would like to do is assign the user's name to data() name attribute — AllenC
– AllenC, Commented Nov 7, 2018 at 15:55

Hammerbot · Accepted Answer · 2018-11-07 16:00:32Z

2

I'm assuming that you are using NUXT (from the asyncData method).

The data you return from the asyncData method is merged into the data of your component.

You should do the following:

<template>
    <v-text-field
            v-model="name"
            label="Name"></v-text-field>
</template>

<script>
    import axios from 'axios';

    export default {
        data() {
            return {}
        },
        asyncData ({ params }) {
            return axios.get(`my-url`).then((response) => {
                return { name: response.data.data.results[0].name };
            })
        }
    }
</script>

answered Nov 7, 2018 at 16:00

Hammerbot

16.5k13 gold badges67 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

AllenC Over a year ago

On my terminal I keep getting ✖ error TypeError: Cannot read property 'results' of undefined

Husam Elbashir · Accepted Answer · 2018-11-07 16:00:46Z

1

How about using the created hook?

created() {
   this.name = this.user.name
}

answered Nov 7, 2018 at 16:00

Husam Elbashir

7,1953 gold badges20 silver badges32 bronze badges

1 Comment

AllenC Over a year ago

Thanks @Husam Ibrahim

Collectives™ on Stack Overflow

Adding data to v-text-field from axios response

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related