vue.js - 从 axios 响应向 v-text-field 添加数据

Question

如何将从 axios 检索到的值分配给 v-text-field

我的模板中有这个:

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

Answer 1

我假设您正在使用 NUXT(来自 asyncData 方法)。

您从 asyncData 方法返回的数据被合并到您的组件的数据中。

您应该执行以下操作:

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